/* ============================================================
 * article-edit.css — page-scoped tokens, fonts, and chrome for
 * pages/article-edit.html.
 *
 * Everything here is scoped under .article-edit-app so
 * none of these tokens leak into the rest of the portal. The
 * design handoff at docs/design_handoff_article_creation/ is
 * the visual source of truth — see README.md "Design Tokens".
 * ============================================================ */

/* ----- @font-face — variable fonts vendored at assets/vendor/fonts/
 * Single woff2 per family covers the full weight range. Latin subset only. */
@font-face {
  font-family: 'Manrope';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/manrope/variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Source Serif 4';
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/source-serif-4/variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Source Serif 4';
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  src: url('../vendor/fonts/source-serif-4/variable-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  src: url('../vendor/fonts/jetbrains-mono/variable.woff2') format('woff2-variations');
}

/* ----- Page-scoped token block -----
 * Accent + fonts are kept LOCAL (deliberate editor identity from the
 * design handoff — indigo, Manrope). All neutrals (paper/ink/border/
 * shadow) ALIAS the global theme-aware tokens so the editor canvas
 * follows light/dark mode like every other page. Hard-coding light hex
 * here is what previously left the canvas white in dark mode. */
.article-edit-app, .page-edit-app {
  /* Accent (design handoff default — Indigo) */
  --accent:     #4f46e5;
  --accent-50:  #eef2ff;
  --accent-100: #e0e7ff;
  --accent-600: #4f46e5;
  --accent-700: #4338ca;
  --accent-fg:  #ffffff;

  /* Neutrals — aliased to global tokens (light/dark via [data-theme]) */
  --paper:   var(--bg);
  --ink-900: var(--text);
  --ink-800: var(--text);
  --ink-700: var(--text);
  --ink-600: var(--text-2);
  --ink-500: var(--text-3);
  --ink-400: var(--text-4);
  --ink-300: var(--border-strong);
  --ink-200: var(--border);
  --ink-150: var(--border);
  --ink-100: var(--bg-alt);
  --ink-50:  var(--bg-alt);

  /* Lines */
  --ae-border:        var(--border);
  --ae-border-strong: var(--border-strong);
  --ae-hover:         var(--bg-alt);

  /* Shadows — global --shadow-* already swap subtle ↔ pronounced per theme */
  --ae-shadow-sm: var(--shadow-1);
  --ae-shadow-md: var(--shadow-2);
  --ae-shadow-lg: var(--shadow-3);

  /* Fonts */
  --ae-font-ui:      'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ae-font-article: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --ae-font-serif:   'Source Serif 4', Georgia, serif;
  --ae-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  font-family: var(--ae-font-ui);
}

/* Table-size grid picker (toolbar `table` button) — hover to size, click
   to insert. Caps at 8×8; cell highlight tracks the hovered area. */
/* The table-size picker is appended to document.body (outside the
   .article-edit-app scope) so it uses GLOBAL tokens, not --ae-*
   aliases. The aliases are declared inside .article-edit-app and
   resolve to initial (transparent / invalid) at body level — which
   is what made the grid cells invisible until hover. */
.ae-tablegrid {
  position: fixed; z-index: 200;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; box-shadow: var(--shadow-2);
  font: 500 12px var(--font-sans);
  color: var(--text);
}
.ae-tg-label { color: var(--text-3); margin-bottom: 6px; padding: 0 2px; }
.ae-tg-grid { display: grid; gap: 3px; }
.ae-tg-cell {
  width: 18px; height: 18px; border: 1px solid var(--border);
  background: var(--bg-alt); border-radius: 2px; cursor: pointer;
  transition: background 60ms ease, border-color 60ms ease;
}
.ae-tg-cell.is-on { background: var(--primary); border-color: var(--primary); }

/* Floating table toolbar — reuses the dark .ae-figtoolbar pill, with
   small "row" / "col" / "table" axis chips on the delete buttons so
   the trash icon's target is unambiguous. */
.ae-tabletoolbar .ae-tt-axis {
  font: 600 10px var(--ae-font-ui); letter-spacing: 0.05em;
  text-transform: uppercase; margin-left: 4px; opacity: 0.85;
}

/* Insert-image modal (toolbar `image` button) — file picker + URL input. */
.ae-img-upload-row { display: flex; align-items: center; gap: 10px; }
.ae-img-or {
  display: flex; align-items: center; gap: 8px; margin: 10px 0;
  font: 500 11.5px var(--ae-font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-500);
}
.ae-img-or::before, .ae-img-or::after {
  content: ''; flex: 1; height: 1px; background: var(--ae-border);
}

/* Tone-tinted callouts (handoff "Design Tokens > Tone-tinted callouts").
 * Theme-aware via color-mix: 12% of the tone hue mixed with the current
 * page background. In light mode that produces the original light tint;
 * in dark mode the same recipe yields a subtle dark tint of the same
 * hue, so the callout reads as colored-but-quiet instead of a bright
 * white panel on a dark page. The left border stripe stays pure for
 * unambiguous tone identification. */
.article-edit-app aside[data-block="callout"], .page-edit-app aside[data-block="callout"] { padding: 12px 14px; border-radius: 8px; margin: 16px 0; border-left: 3px solid; color: var(--text); }
.article-edit-app aside[data-block="callout"][data-tone="info"], .page-edit-app aside[data-block="callout"][data-tone="info"] { background: color-mix(in srgb, #3b82f6 12%, var(--bg)); border-left-color: #3b82f6; }
.article-edit-app aside[data-block="callout"][data-tone="success"], .page-edit-app aside[data-block="callout"][data-tone="success"] { background: color-mix(in srgb, #10b981 12%, var(--bg)); border-left-color: #10b981; }
.article-edit-app aside[data-block="callout"][data-tone="warning"], .page-edit-app aside[data-block="callout"][data-tone="warning"] { background: color-mix(in srgb, #f59e0b 12%, var(--bg)); border-left-color: #f59e0b; }
.article-edit-app aside[data-block="callout"][data-tone="danger"], .page-edit-app aside[data-block="callout"][data-tone="danger"] { background: color-mix(in srgb, #ef4444 12%, var(--bg)); border-left-color: #ef4444; }

/* ----- Page chrome ----- */
.article-edit-app, .page-edit-app {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  height: calc(100dvh - var(--top-h) - 12px);
}

/* Workbar palette override — re-theme the canonical .workbar primitive
 * (see assets/css/workbar.css) with the article-edit identity tokens
 * (indigo --accent, page neutrals, Manrope UI font). The component's
 * shape, sticky behavior, and responsive states come from workbar.css;
 * this block only swaps the colors + the UI font so the chrome reads
 * as the editor, not the rest of the portal.
 *
 * Note: --workbar-accent-bg / --workbar-accent-fg drive the "in-flight"
 * pill state (Saving… / Syncing…) and the mobile menu's active row.
 * Inheriting indigo here preserves the editor identity established by
 * the design handoff. */
.article-edit-app .workbar, .page-edit-app .workbar {
  --workbar-bg:          var(--paper);
  --workbar-bg-nav:      var(--ink-100);
  --workbar-border:      var(--ae-border);
  --workbar-shadow:      var(--ae-shadow-sm);
  --workbar-text:        var(--ink-800);
  --workbar-text-muted:  var(--ink-500);
  --workbar-text-hover:  var(--ink-800);
  --workbar-accent:      var(--accent);
  --workbar-accent-bg:   var(--accent-50);
  --workbar-accent-fg:   var(--accent-700);
  --workbar-hover-bg:    var(--ae-hover);

  /* Editor design-handoff "settled" palette: deeper emerald text with a
   * brighter dot — preserves the visual signal from v1.68.x article-edit. */
  --workbar-pill-success-text: #059669;
  --workbar-pill-success-dot:  #10b981;

  font-family: var(--ae-font-ui);
}
.article-edit-app .workbar-mobile-menu, .page-edit-app .workbar-mobile-menu { box-shadow: var(--ae-shadow-md); }

/* Split layout — workspace + splitter + preview pane. */
.article-edit-app .ae-split, .page-edit-app .ae-split {
  display: grid;
  grid-template-columns: 1fr 6px var(--ae-preview-w, 460px);
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
.article-edit-app .ae-workspace, .page-edit-app .ae-workspace {
  overflow: auto; min-width: 0;
  /* padding-top is 0 (not 12px) so scrolled content can't leak through
     the padding band into the gap between the toptabs strip and the
     sticky toolbar. The 12px visual gap above the column is already
     provided by .article-edit-app's grid `gap: 12px` (which is empty
     grid space, not part of any scroll container). */
  padding: 0 18px 24px;
  /* No outer border/bg — tab bodies and panel-sections supply their own
     framing. A wrapping card here would double-frame around the
     panel-section headers (e.g. "Author card" sits flush against it). */
  background: transparent;
  border: 0;
}
/* Splitter — vertical accent stripe with a pill grip near the bottom.
 * The grip is a separate child element so it doesn't move on resize. */
.article-edit-app .ae-splitter, .page-edit-app .ae-splitter {
  cursor: col-resize;
  background: transparent;
  position: relative;
  outline: 0;
}
.article-edit-app .ae-splitter::before, .page-edit-app .ae-splitter::before {
  /* The vertical stripe — full height, centered. Light grey at rest,
     flips to the operator's brand colour on hover / focus / drag (see
     the rules at the bottom of this block). */
  content: ''; position: absolute; top: 3px; bottom: 0; left: 50%;
  width: 4px; transform: translateX(-50%);
  background: #e9eef2;
  border-radius: 999px;
  opacity: 1;
  transition: background 120ms ease, width 120ms ease;
}
.article-edit-app .ae-splitter::after, .page-edit-app .ae-splitter::after {
  /* Rounded-rectangle grip — 6 dots in a tight 2×3 grid. Vertically
     centered on the viewport (the splitter itself fills the workspace,
     so 50% of it ≈ middle of the screen). */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 44px; transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at  7px  18px, var(--ink-400) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  18px, var(--ink-400) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  22px, var(--ink-400) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  22px, var(--ink-400) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  26px, var(--ink-400) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  26px, var(--ink-400) 0.8px, transparent 1.1px),
    var(--paper);
  border: 1px solid var(--ae-border);
  border-radius: 7px;
  box-shadow: var(--ae-shadow-sm);
  transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease, background 120ms ease;
  pointer-events: none;  /* clicks fall through to the splitter itself */
}
.article-edit-app .ae-splitter:hover::before,
.page-edit-app .ae-splitter:hover::before,
.article-edit-app .ae-splitter:focus::before, .page-edit-app .ae-splitter:focus::before { background: var(--primary); width: 6px; }
.article-edit-app .ae-splitter:hover::after,
.page-edit-app .ae-splitter:hover::after,
.article-edit-app .ae-splitter:focus::after, .page-edit-app .ae-splitter:focus::after {
  box-shadow: var(--ae-shadow-md);
  transform: translate(-50%, -50%) scale(1.04);
  /* Handle picks up the operator's secondary brand colour on hover —
     border tints to --secondary and the dots also flip so the grip
     pattern stays visible against the same hue. */
  border-color: var(--primary);
  background:
    radial-gradient(circle at  7px  18px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  18px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  22px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  22px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  26px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  26px, var(--primary) 0.8px, transparent 1.1px),
    var(--paper);
}
body.is-resizing .article-edit-app .ae-splitter::before, body.is-resizing .page-edit-app .ae-splitter::before { background: var(--primary); width: 6px; }
body.is-resizing .article-edit-app .ae-splitter::after, body.is-resizing .page-edit-app .ae-splitter::after {
  border-color: var(--primary);
  background:
    radial-gradient(circle at  7px  18px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  18px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  22px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  22px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at  7px  26px, var(--primary) 0.8px, transparent 1.1px),
    radial-gradient(circle at 11px  26px, var(--primary) 0.8px, transparent 1.1px),
    var(--paper);
}
body.is-resizing { user-select: none; cursor: col-resize; }
.article-edit-app .ae-preview, .page-edit-app .ae-preview {
  overflow: auto; min-width: 0;
  /* padding-top is 0 (not 12px) so scrolled preview content can't leak
     through the padding band into the gap between the toptabs strip
     and the sticky LIVE PREVIEW chrome bar. The 12px visual gap above
     the column comes from .article-edit-app's grid `gap: 12px` (empty
     grid space, not part of the scroll container). */
  padding: 0 18px 24px;
}

/* ----- Slim themed scrollbars (scoped to article-edit) ----- */
.article-edit-app .ae-workspace,
.page-edit-app .ae-workspace,
.article-edit-app .ae-preview,
.page-edit-app .ae-preview,
.article-edit-app .ae-preview-stage,
.page-edit-app .ae-preview-stage,
.article-edit-app .ae-fullscreen,
.page-edit-app .ae-fullscreen,
.article-edit-app .ae-share-code,
.page-edit-app .ae-share-code,
.article-edit-app .ae-editor-host .ProseMirror,
.page-edit-app .ae-editor-host .ProseMirror,
.article-edit-app [data-tab-body], .page-edit-app [data-tab-body] {
  scrollbar-width: thin;
  scrollbar-color: #e9eef2 transparent;
}
.article-edit-app .ae-workspace::-webkit-scrollbar,
.page-edit-app .ae-workspace::-webkit-scrollbar,
.article-edit-app .ae-preview::-webkit-scrollbar,
.page-edit-app .ae-preview::-webkit-scrollbar,
.article-edit-app .ae-preview-stage::-webkit-scrollbar,
.page-edit-app .ae-preview-stage::-webkit-scrollbar,
.article-edit-app .ae-fullscreen::-webkit-scrollbar,
.page-edit-app .ae-fullscreen::-webkit-scrollbar,
.article-edit-app .ae-share-code::-webkit-scrollbar,
.page-edit-app .ae-share-code::-webkit-scrollbar,
.article-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar,
.page-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar,
.article-edit-app [data-tab-body]::-webkit-scrollbar, .page-edit-app [data-tab-body]::-webkit-scrollbar {
  width: 6px; height: 6px;
}
.article-edit-app .ae-workspace::-webkit-scrollbar-track,
.page-edit-app .ae-workspace::-webkit-scrollbar-track,
.article-edit-app .ae-preview::-webkit-scrollbar-track,
.page-edit-app .ae-preview::-webkit-scrollbar-track,
.article-edit-app .ae-preview-stage::-webkit-scrollbar-track,
.page-edit-app .ae-preview-stage::-webkit-scrollbar-track,
.article-edit-app .ae-fullscreen::-webkit-scrollbar-track,
.page-edit-app .ae-fullscreen::-webkit-scrollbar-track,
.article-edit-app .ae-share-code::-webkit-scrollbar-track,
.page-edit-app .ae-share-code::-webkit-scrollbar-track,
.article-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-track,
.page-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-track,
.article-edit-app [data-tab-body]::-webkit-scrollbar-track, .page-edit-app [data-tab-body]::-webkit-scrollbar-track {
  background: transparent;
}
.article-edit-app .ae-workspace::-webkit-scrollbar-thumb,
.page-edit-app .ae-workspace::-webkit-scrollbar-thumb,
.article-edit-app .ae-preview::-webkit-scrollbar-thumb,
.page-edit-app .ae-preview::-webkit-scrollbar-thumb,
.article-edit-app .ae-preview-stage::-webkit-scrollbar-thumb,
.page-edit-app .ae-preview-stage::-webkit-scrollbar-thumb,
.article-edit-app .ae-fullscreen::-webkit-scrollbar-thumb,
.page-edit-app .ae-fullscreen::-webkit-scrollbar-thumb,
.article-edit-app .ae-share-code::-webkit-scrollbar-thumb,
.page-edit-app .ae-share-code::-webkit-scrollbar-thumb,
.article-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-thumb,
.page-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-thumb,
.article-edit-app [data-tab-body]::-webkit-scrollbar-thumb, .page-edit-app [data-tab-body]::-webkit-scrollbar-thumb {
  background: #e9eef2;
  border-radius: 999px;
  border: none;
  transition: background 120ms ease;
}
.article-edit-app .ae-workspace::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-workspace::-webkit-scrollbar-thumb:hover,
.article-edit-app .ae-preview::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-preview::-webkit-scrollbar-thumb:hover,
.article-edit-app .ae-preview-stage::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-preview-stage::-webkit-scrollbar-thumb:hover,
.article-edit-app .ae-fullscreen::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-fullscreen::-webkit-scrollbar-thumb:hover,
.article-edit-app .ae-share-code::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-share-code::-webkit-scrollbar-thumb:hover,
.article-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-thumb:hover,
.page-edit-app .ae-editor-host .ProseMirror::-webkit-scrollbar-thumb:hover,
.article-edit-app [data-tab-body]::-webkit-scrollbar-thumb:hover, .page-edit-app [data-tab-body]::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}
.article-edit-app *::-webkit-scrollbar-corner, .page-edit-app *::-webkit-scrollbar-corner { background: transparent; }

/* Fullscreen overlay shell — content goes in via ae-fullscreen.js. */
.article-edit-app .ae-fullscreen, .page-edit-app .ae-fullscreen {
  position: fixed; inset: 0; z-index: 250;
  background: var(--paper); overflow: auto;
}
.article-edit-app .ae-fs-head, .page-edit-app .ae-fs-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; background: var(--paper);
  border-bottom: 1px solid var(--ae-border);
}
.article-edit-app .ae-fs-sep, .page-edit-app .ae-fs-sep { width: 1px; height: 20px; background: var(--ae-border); }
.article-edit-app .ae-fs-brand, .page-edit-app .ae-fs-brand { font: 600 14px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .ae-fs-url, .page-edit-app .ae-fs-url { font: 400 13px var(--ae-font-mono); color: var(--ink-500); }
.article-edit-app .ae-fs-words, .page-edit-app .ae-fs-words { font: 500 13px var(--ae-font-ui); color: var(--ink-500); }
.article-edit-app .ae-fs-stage, .page-edit-app .ae-fs-stage { padding: 32px 24px; }
.article-edit-app .ae-fs-stage > *, .page-edit-app .ae-fs-stage > * {
  max-width: 880px; margin: 0 auto; background: var(--paper);
  border-radius: 12px; box-shadow: var(--ae-shadow-md); overflow: hidden;
}
.article-edit-app .ae-fs-stage[data-theme="dark"], .page-edit-app .ae-fs-stage[data-theme="dark"] { background: #0b0d12; }
.article-edit-app .ae-fs-stage[data-theme="dark"] > *, .page-edit-app .ae-fs-stage[data-theme="dark"] > * { background: #0b0d12; color: #d8dae3; }

/* ----- Image figure ----- */
.article-edit-app figure.embedded-figure, .page-edit-app figure.embedded-figure {
  position: relative; margin: 16px 0; max-width: 100%;
}
.article-edit-app figure.embedded-figure[data-size="s"], .page-edit-app figure.embedded-figure[data-size="s"] { width: 50%; }
.article-edit-app figure.embedded-figure[data-size="m"], .page-edit-app figure.embedded-figure[data-size="m"] { width: 75%; }
.article-edit-app figure.embedded-figure[data-size="l"], .page-edit-app figure.embedded-figure[data-size="l"] { width: 100%; }
.article-edit-app figure.embedded-figure[data-size="xl"], .page-edit-app figure.embedded-figure[data-size="xl"] { width: calc(100% + 80px); margin-left: -40px; margin-right: -40px; }
.article-edit-app figure.embedded-figure[data-align="left"], .page-edit-app figure.embedded-figure[data-align="left"] { margin-left: 0; margin-right: auto; }
.article-edit-app figure.embedded-figure[data-align="center"], .page-edit-app figure.embedded-figure[data-align="center"] { margin-left: auto; margin-right: auto; }
.article-edit-app figure.embedded-figure[data-align="right"], .page-edit-app figure.embedded-figure[data-align="right"] { margin-left: auto; margin-right: 0; }
.article-edit-app figure.embedded-figure img.embedded, .page-edit-app figure.embedded-figure img.embedded {
  display: block; width: 100%; height: auto; border-radius: 8px;
}
.article-edit-app figure.embedded-figure figcaption, .page-edit-app figure.embedded-figure figcaption {
  font: 400 13px var(--ae-font-ui); color: var(--ink-500);
  margin-top: 6px; text-align: center;
}
.article-edit-app figure.embedded-figure.is-selected, .page-edit-app figure.embedded-figure.is-selected {
  outline: 2px solid var(--accent); outline-offset: 4px;
}

/* ----- Embed card ----- */
.article-edit-app div[data-block="embed"], .page-edit-app div[data-block="embed"] {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--ae-border); border-radius: 10px;
  background: var(--ink-50); margin: 16px 0;
}
.article-edit-app div[data-block="embed"] .embed-icon, .page-edit-app div[data-block="embed"] .embed-icon { font-size: 22px; color: var(--accent); }
.article-edit-app div[data-block="embed"] .embed-host, .page-edit-app div[data-block="embed"] .embed-host { font: 600 13px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app div[data-block="embed"] .embed-url, .page-edit-app div[data-block="embed"] .embed-url { font: 400 12px var(--ae-font-mono); color: var(--ink-500); margin-top: 2px; }

/* ----- Divider blob ----- */
.article-edit-app hr[data-block="divider"], .page-edit-app hr[data-block="divider"] {
  border: 0; margin: 28px 0; height: 14px; position: relative;
}
.article-edit-app hr[data-block="divider"]::before, .page-edit-app hr[data-block="divider"]::before {
  content: '· · ·'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 700 18px var(--ae-font-serif); color: var(--ink-400); letter-spacing: 0.4em;
}

/* ----- Toolbar -----
 * Sticky inside the .ae-workspace scroll container. `top: 0` pins it at
 * the top of the workspace's padded content area when scrolled past —
 * the matching `top: 0` on .ae-preview-chrome means both bars line up
 * horizontally across the splitter.
 *
 * Make .ae-toolbar-host layout-transparent so .ae-toolbar's containing
 * block is .ae-write (the full content column) rather than a tight
 * wrapper. Without this, sticky has no room to slide and the toolbar
 * just scrolls with the content. */
.article-edit-app .ae-toolbar-host, .page-edit-app .ae-toolbar-host { display: contents; }
.article-edit-app .ae-toolbar, .page-edit-app .ae-toolbar {
  position: sticky; top: 0; z-index: 4;
  display: flex; gap: 10px; padding: 6px 10px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--ae-border); border-radius: 10px;
  box-shadow: var(--ae-shadow-sm); margin-bottom: 12px;
}
.article-edit-app .ae-tg, .page-edit-app .ae-tg { display: flex; gap: 2px; padding-right: 10px; border-right: 1px solid var(--ae-border); }
.article-edit-app .ae-tg:last-child, .page-edit-app .ae-tg:last-child { border-right: 0; padding-right: 0; }
.article-edit-app .ae-toolbar button, .page-edit-app .ae-toolbar button {
  width: 30px; height: 30px; border-radius: 6px;
  background: transparent; border: 1px solid transparent;
  color: var(--ink-800); font: 600 13px var(--ae-font-ui); cursor: pointer;
}
.article-edit-app .ae-toolbar button:hover, .page-edit-app .ae-toolbar button:hover { background: var(--ae-hover); }
.article-edit-app .ae-toolbar button[data-active="true"], .page-edit-app .ae-toolbar button[data-active="true"] { background: var(--accent-50); color: var(--accent-700); }
.article-edit-app .ae-toolbar select, .page-edit-app .ae-toolbar select { height: 30px; border: 1px solid var(--ae-border); border-radius: 6px; padding: 0 8px; font: 500 13px var(--ae-font-ui); }
.article-edit-app .ae-color-swatch, .page-edit-app .ae-color-swatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; background: var(--ink-800); }

.article-edit-app .ae-popup,
.page-edit-app .ae-popup,
.ae-popup {
  background: var(--paper, #fff); border: 1px solid var(--ae-border, #e6e8ee); border-radius: 8px;
  box-shadow: var(--ae-shadow-md, 0 4px 12px rgba(0,0,0,0.12)); padding: 4px;
}
.ae-menu-popup button {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  background: transparent; border: 0; font: 500 13px sans-serif; color: #14171f; border-radius: 4px; cursor: pointer;
}
.ae-menu-popup button:hover { background: #f3f4f8; }
.ae-color-popup {
  display: grid; grid-template-columns: repeat(4, 24px); gap: 4px; padding: 6px;
}
.ae-color-popup button { width: 24px; height: 24px; border-radius: 4px; border: 1px solid #e6e8ee; cursor: pointer; }

/* Floating image toolbar (rendered in body, not inside [data-page]) */
.ae-figtoolbar {
  position: fixed; z-index: 200;
  display: inline-flex; gap: 6px; padding: 4px 6px;
  background: rgba(20, 23, 31, 0.95); color: white;
  border-radius: 8px; box-shadow: 0 16px 40px -8px rgba(16, 18, 27, 0.18);
  transition: opacity 120ms ease, transform 120ms ease;
}
/* The `display: inline-flex` above is author CSS and beats the user-agent
   `[hidden] { display: none }` rule, so the JS toggle (`overlay.hidden =
   true/false`) was effectively a no-op — the toolbar stayed visible at
   its last position (or invisible at 0,0 with no top/left). Re-assert
   hiding for the [hidden] attribute the JS toggles. */
.ae-figtoolbar[hidden] { display: none; }
.ae-figtoolbar-group { display: inline-flex; gap: 2px; }
.ae-figtoolbar-sep { width: 1px; background: rgba(255,255,255,0.15); margin: 4px 4px; }
.ae-figtoolbar button {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: white; border: 0;
  font: 600 12px var(--ae-font-ui, system-ui);
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  min-width: 26px; height: 26px;
}
.ae-figtoolbar button svg { width: 14px; height: 14px; }
.ae-figtoolbar button:hover            { background: rgba(255,255,255,0.10); }
.ae-figtoolbar button[data-active="true"] { background: var(--primary); }

/* ----- Preview pane ----- */
.article-edit-app .ae-preview-chrome, .page-edit-app .ae-preview-chrome {
  /* Sticky inside the .ae-preview scroll container. `top: 0` matches
     the toolbar across the splitter so both bars stay aligned. */
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--paper); border: 1px solid var(--ae-border); border-radius: 10px;
  margin-bottom: 10px; box-shadow: var(--ae-shadow-sm); flex-wrap: wrap;
}
.article-edit-app .ae-eyebrow, .page-edit-app .ae-eyebrow {
  font: 500 11.5px var(--ae-font-ui); letter-spacing: 0.06em; text-transform: uppercase;
  /* Operator brand colour — gives the LIVE PREVIEW label the role of a
     section eyebrow on the preview side. */
  color: var(--primary);
}
.article-edit-app .ae-seg, .page-edit-app .ae-seg { display: inline-flex; background: var(--ink-100); border-radius: 6px; padding: 2px; }
.article-edit-app .ae-seg button, .page-edit-app .ae-seg button {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 4px 10px; border-radius: 4px;
  font: 500 12px var(--ae-font-ui); color: var(--ink-600); cursor: pointer;
}
.article-edit-app .ae-seg button svg, .page-edit-app .ae-seg button svg { width: 14px; height: 14px; flex-shrink: 0; }
.article-edit-app .ae-seg button.is-active, .page-edit-app .ae-seg button.is-active { background: var(--paper); color: var(--ink-800); box-shadow: var(--ae-shadow-sm); }
/* Responsive fallback — narrow preview chrome (≤ 540px) drops the
   text labels and shows icon-only buttons. The button keeps its title
   attribute as a tooltip. */
@media (max-width: 540px) {
  .article-edit-app .ae-preview-chrome .ae-seg button .ae-seg-label, .page-edit-app .ae-preview-chrome .ae-seg button .ae-seg-label { display: none; }
  .article-edit-app .ae-preview-chrome .ae-seg button, .page-edit-app .ae-preview-chrome .ae-seg button { padding: 4px 8px; }
}
/* Word + read-time counts: dark number, muted unit label.
   Hierarchy reads as 138 _words · 1 _min read_. */
.article-edit-app .ae-words, .article-edit-app .ae-readtime, .page-edit-app .ae-words, .page-edit-app .ae-readtime {
  font: 500 12px var(--ae-font-ui); color: var(--ink-500);
}
.article-edit-app .ae-count, .page-edit-app .ae-count { color: var(--ink-900); font-weight: 600; }
.article-edit-app .ae-count-unit, .page-edit-app .ae-count-unit { color: var(--ink-500); font-weight: 500; }
/* "words" unit is contrast-paired with its number per the user's
   intent — both go to ink-900 / strong. */
.article-edit-app .ae-words .ae-count-unit, .page-edit-app .ae-words .ae-count-unit { color: var(--ink-900); font-weight: 500; }
.article-edit-app .ae-fs-trigger, .page-edit-app .ae-fs-trigger {
  background: transparent; border: 1px solid var(--ae-border); border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; color: var(--ink-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.article-edit-app .ae-fs-trigger:hover, .page-edit-app .ae-fs-trigger:hover { background: var(--ae-hover); color: var(--ink-800); }
.article-edit-app .ae-fs-trigger:disabled, .page-edit-app .ae-fs-trigger:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.article-edit-app .ae-fs-trigger:disabled:hover, .page-edit-app .ae-fs-trigger:disabled:hover { background: transparent; color: var(--ink-600); }

.article-edit-app .ae-preview-stage, .page-edit-app .ae-preview-stage {
  min-height: 100%;
}
.article-edit-app .ae-preview-stage[data-device="desktop"], .page-edit-app .ae-preview-stage[data-device="desktop"] {
  background: var(--ink-100); padding: 24px;
}
.article-edit-app .ae-preview-stage[data-device="desktop"] > *, .page-edit-app .ae-preview-stage[data-device="desktop"] > * {
  max-width: 880px; margin: 0 auto; background: var(--paper);
  border-radius: 12px; box-shadow: var(--ae-shadow-md); overflow: hidden;
}
.article-edit-app .ae-preview-stage[data-device="mobile"], .page-edit-app .ae-preview-stage[data-device="mobile"] {
  background: var(--ink-100); padding: 32px 16px;
}
.article-edit-app .ae-preview-stage[data-device="mobile"] > *, .page-edit-app .ae-preview-stage[data-device="mobile"] > * {
  max-width: 390px; margin: 0 auto; background: var(--paper);
  border-radius: 28px; border: 6px solid var(--ink-900); box-shadow: var(--ae-shadow-lg); overflow: hidden;
}
/* LIVE PREVIEW theme toggle — `data-theme` on the stage forces the
   relevant CSS-variable values inside the preview, regardless of the
   operator's global theme. The article body inside the preview (h1, p,
   tags, byline, etc.) renders via tokens like `--text` / `--bg-alt` —
   if those are left to inherit from `:root` / `[data-theme="dark"]` on
   <html>, the operator's GLOBAL theme leaks into the preview and the
   "preview Dark" toggle only flips the stage background while the body
   tokens stay light (or vice versa). Re-declaring the global tokens
   here means descendants resolve to the LOCAL preview theme. */

/* Preview · Light — final values, NOT aliases. The editor's
   `--ink-900: var(--text)` aliases are resolved at `.article-edit-app`
   (computed-value time), so re-declaring `--text` here is too late to
   affect `--ink-*`. We have to set the inks directly. */
.article-edit-app .ae-preview-stage[data-theme="light"], .page-edit-app .ae-preview-stage[data-theme="light"] {
  --bg:             #FFFFFF;
  --bg-alt:         #F8FAFC;
  --bg-sunken:      #F1F5F9;
  --text:           #0F172A;
  --text-2:         #475569;
  --text-3:         #64748B;
  --text-4:         #94A3B8;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  /* Inks + paper redeclared directly (no var() indirection). */
  --paper:          #FFFFFF;
  --ink-900:        #0F172A;
  --ink-800:        #0F172A;
  --ink-700:        #0F172A;
  --ink-600:        #475569;
  --ink-500:        #64748B;
  --ink-400:        #94A3B8;
  --ink-300:        #CBD5E1;
  --ink-200:        #E2E8F0;
  --ink-150:        #E2E8F0;
  --ink-100:        #F8FAFC;
  --ink-50:         #F8FAFC;
  --ae-border:        #E2E8F0;
  --ae-border-strong: #CBD5E1;
  --ae-hover:         #F8FAFC;
}

/* Preview · Dark — final values, no aliases (see Light note above). */
.article-edit-app .ae-preview-stage[data-theme="dark"], .page-edit-app .ae-preview-stage[data-theme="dark"] {
  background: #1b1d24;
  --bg:             #0B1220;
  --bg-alt:         #111827;
  --bg-sunken:      #0A101C;
  --text:           #F1F5F9;
  --text-2:         #CBD5E1;
  --text-3:         #94A3B8;
  --text-4:         #64748B;
  --border:         #1E293B;
  --border-strong:  #334155;
  /* Inks + paper redeclared directly. */
  --paper:          #0B1220;
  --ink-900:        #F1F5F9;
  --ink-800:        #F1F5F9;
  --ink-700:        #F1F5F9;
  --ink-600:        #CBD5E1;
  --ink-500:        #94A3B8;
  --ink-400:        #64748B;
  --ink-300:        #334155;
  --ink-200:        #1E293B;
  --ink-150:        #1E293B;
  --ink-100:        #111827;
  --ink-50:         #111827;
  --ae-border:        #1E293B;
  --ae-border-strong: #334155;
  --ae-hover:         #111827;
}
.article-edit-app .ae-preview-stage[data-theme="dark"] > *, .page-edit-app .ae-preview-stage[data-theme="dark"] > * { background: #0b0d12; color: #d8dae3; }

/* ----- Write tab ----- */
/* Eyebrow input — small uppercase brand-coloured label that mirrors the
   `eyebrowEl` rendered in the live preview / partner reader. Writes
   to `article.tags[0]` so the Settings-tab tags list and this field
   stay in sync. */
.article-edit-app .ae-eyebrow-input, .page-edit-app .ae-eyebrow-input {
  display: block; width: 100%; border: 0; outline: 0;
  font: 600 11.5px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary);
  padding: 4px 0 2px; background: transparent;
}
.article-edit-app .ae-eyebrow-input::placeholder, .page-edit-app .ae-eyebrow-input::placeholder { color: var(--text-4); letter-spacing: 0.08em; }
.article-edit-app .ae-title-input, .page-edit-app .ae-title-input {
  display: block; width: 100%; resize: none; border: 0; outline: 0;
  font: 700 34px/1.15 var(--ae-font-ui); letter-spacing: -0.02em; color: var(--ink-900);
  padding: 8px 0; background: transparent;
}
.article-edit-app .ae-excerpt-input, .page-edit-app .ae-excerpt-input {
  display: block; width: 100%; resize: none; border: 0; outline: 0;
  font: 400 17px/1.5 var(--ae-font-ui); color: var(--ink-500);
  padding: 4px 0 14px; background: transparent;
}
.article-edit-app .ae-cover, .page-edit-app .ae-cover {
  position: relative; border: 1.5px dashed var(--ae-border-strong);
  border-radius: 12px; background: var(--ink-50);
  margin: 0 0 18px; padding: 0; overflow: hidden;
}
.article-edit-app .ae-cover[data-state="empty"] .ae-cover-img,
.page-edit-app .ae-cover[data-state="empty"] .ae-cover-img,
.article-edit-app .ae-cover[data-state="empty"] .ae-cover-actions, .page-edit-app .ae-cover[data-state="empty"] .ae-cover-actions { display: none; }
.article-edit-app .ae-cover[data-state="filled"] .ae-cover-zone, .page-edit-app .ae-cover[data-state="filled"] .ae-cover-zone { display: none; }
.article-edit-app .ae-cover-zone, .page-edit-app .ae-cover-zone { padding: 0; text-align: center; cursor: pointer; color: var(--ink-500); font: 500 14px var(--ae-font-ui); background: transparent; border: 0; }
/* Neutralize upload.js's internal .upload-zone styling — the outer
   .ae-cover provides the dashed-border + bg; the inner zone is just the
   click target carrying icon + title + sub. */
.article-edit-app .ae-cover-zone .upload-zone, .page-edit-app .ae-cover-zone .upload-zone {
  padding: 56px 16px; background: transparent; border: 0; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-500);
}
.article-edit-app .ae-cover-zone .uz-icon, .page-edit-app .ae-cover-zone .uz-icon { color: var(--ink-400); }
.article-edit-app .ae-cover-zone .uz-title, .page-edit-app .ae-cover-zone .uz-title { font: 600 15px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .ae-cover-zone .uz-sub, .page-edit-app .ae-cover-zone .uz-sub { font: 400 12.5px var(--ae-font-ui); color: var(--ink-500); }
.article-edit-app .ae-cover-zone .upload-list, .page-edit-app .ae-cover-zone .upload-list { display: none; }
.article-edit-app .ae-cover-img, .page-edit-app .ae-cover-img { display: block; width: 100%; height: 320px; object-fit: cover; }
.article-edit-app .ae-cover-actions, .page-edit-app .ae-cover-actions {
  position: absolute; top: 12px; right: 12px; display: flex; gap: 8px;
}
.article-edit-app .ae-cover-actions .btn, .page-edit-app .ae-cover-actions .btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.5); color: white; backdrop-filter: blur(6px);
  border: 0; padding: 6px 10px; border-radius: 6px; font: 500 12px var(--ae-font-ui); cursor: pointer;
}
.article-edit-app .ae-cover-actions .btn svg, .page-edit-app .ae-cover-actions .btn svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Tiptap ProseMirror editor host */
.article-edit-app .ae-editor-host .ProseMirror, .page-edit-app .ae-editor-host .ProseMirror {
  min-height: 320px; outline: 0;
  font: 400 16px/1.65 var(--ae-font-ui); color: var(--ink-800);
  caret-color: var(--accent);
}
.article-edit-app .ae-editor-host .ProseMirror h1, .page-edit-app .ae-editor-host .ProseMirror h1 { font: 800 36px/1.15 var(--ae-font-ui); letter-spacing: -0.02em; color: var(--ink-900); margin: 24px 0 12px; }
.article-edit-app .ae-editor-host .ProseMirror h2, .page-edit-app .ae-editor-host .ProseMirror h2 { font: 700 24px/1.25 var(--ae-font-ui); letter-spacing: -0.015em; color: var(--ink-900); margin: 22px 0 10px; }
.article-edit-app .ae-editor-host .ProseMirror h3, .page-edit-app .ae-editor-host .ProseMirror h3 { font: 700 18px/1.3 var(--ae-font-ui); color: var(--ink-900); margin: 18px 0 8px; }
.article-edit-app .ae-editor-host .ProseMirror p, .page-edit-app .ae-editor-host .ProseMirror p { margin: 10px 0; }
.article-edit-app .ae-editor-host .ProseMirror blockquote, .page-edit-app .ae-editor-host .ProseMirror blockquote { border-left: 3px solid var(--ink-300); padding-left: 14px; margin: 14px 0; font-style: italic; font-family: var(--ae-font-serif); color: var(--ink-700); }
/* Code blocks: hard-coded terminal-dark in BOTH themes. The editor's
   `--ink-900` is aliased to `var(--text)` which inverts in dark mode and
   produced a light pre with light text — invisible. Inline code stays
   theme-aware (subtle background + body text colour). The thin
   semi-transparent outline gives the block visual definition even when
   the surrounding page background is also dark (workspace `--bg-alt`
   in dark mode is `#111827`, almost the same hue as the pre). */
.article-edit-app .ae-editor-host .ProseMirror pre, .page-edit-app .ae-editor-host .ProseMirror pre { background: #14171f; color: #e6e8ee; padding: 12px 14px; border-radius: 8px; overflow: auto; font: 400 13px var(--ae-font-mono); border: 1px solid rgba(255, 255, 255, 0.07); }
.article-edit-app .ae-editor-host .ProseMirror pre code, .page-edit-app .ae-editor-host .ProseMirror pre code { background: transparent; color: inherit; padding: 0; }
.article-edit-app .ae-editor-host .ProseMirror code, .page-edit-app .ae-editor-host .ProseMirror code { background: var(--ink-100); color: var(--ink-800); padding: 1px 4px; border-radius: 3px; font: 400 13px var(--ae-font-mono); }
.article-edit-app .ae-editor-host .ProseMirror ul, .article-edit-app .ae-editor-host .ProseMirror ol, .page-edit-app .ae-editor-host .ProseMirror ul, .page-edit-app .ae-editor-host .ProseMirror ol { padding-left: 22px; margin: 10px 0; }
.article-edit-app .ae-editor-host .ProseMirror table, .page-edit-app .ae-editor-host .ProseMirror table { border-collapse: collapse; margin: 12px 0; }
.article-edit-app .ae-editor-host .ProseMirror th, .article-edit-app .ae-editor-host .ProseMirror td, .page-edit-app .ae-editor-host .ProseMirror th, .page-edit-app .ae-editor-host .ProseMirror td { border: 1px solid var(--ae-border); padding: 6px 10px; }
.article-edit-app .ae-editor-host .ProseMirror a, .page-edit-app .ae-editor-host .ProseMirror a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }

/* ----- Author tab ----- */
.article-edit-app .photo-upload, .page-edit-app .photo-upload { display: flex; gap: 16px; align-items: center; }
.article-edit-app .photo-upload-preview, .page-edit-app .photo-upload-preview {
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px dashed var(--ae-border-strong);
  background-size: cover; background-position: center; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink-500);
}
.article-edit-app .photo-upload-preview.filled, .page-edit-app .photo-upload-preview.filled { border-style: solid; }
.article-edit-app .photo-upload-actions, .page-edit-app .photo-upload-actions { display: flex; flex-direction: column; gap: 4px; }
.article-edit-app .field, .page-edit-app .field { margin: 12px 0; }
.article-edit-app .field-label, .page-edit-app .field-label { display: block; font: 600 13px var(--ae-font-ui); color: var(--ink-700); margin-bottom: 4px; }
.article-edit-app .field-input,
.page-edit-app .field-input,
.article-edit-app .field-textarea, .page-edit-app .field-textarea {
  display: block; width: 100%; padding: 8px 10px;
  border: 1px solid var(--ae-border); border-radius: 6px;
  font: 400 14px var(--ae-font-ui); color: var(--ink-800); background: var(--paper);
}
.article-edit-app .field-textarea, .page-edit-app .field-textarea { min-height: 80px; resize: vertical; }
.article-edit-app .field-hint, .page-edit-app .field-hint { font: 400 12px var(--ae-font-ui); color: var(--ink-500); margin-top: 4px; }
.article-edit-app .field-prefix-input, .page-edit-app .field-prefix-input {
  display: flex; align-items: stretch; border: 1px solid var(--ae-border); border-radius: 6px; overflow: hidden;
}
.article-edit-app .field-prefix-input .prefix, .page-edit-app .field-prefix-input .prefix {
  padding: 8px 10px; background: var(--ink-50); border-right: 1px solid var(--ae-border);
  font: 500 13px var(--ae-font-ui); color: var(--ink-500); white-space: nowrap;
}
.article-edit-app .field-prefix-input input, .page-edit-app .field-prefix-input input {
  flex: 1; border: 0; outline: 0; padding: 8px 10px; font: 400 14px var(--ae-font-ui); color: var(--ink-800);
}
/* Tab body panels.
 * The top-of-tab "Section title + subtitle" sits OUTSIDE any card (h2 + .panel-sub).
 * Inside, each `.panel-section` is a bordered card with an UPPERCASE eyebrow heading.
 * The outer `.panel` wrapper is a layout-only container here — strip the
 * generic border/background it picks up from components.css so the inner
 * `.panel-section` cards don't get double-framed. */
.article-edit-app .panel, .page-edit-app .panel {
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.article-edit-app .panel > header, .page-edit-app .panel > header { margin-bottom: 18px; }
.article-edit-app .panel > header h2, .page-edit-app .panel > header h2 { font: 700 22px/1.2 var(--ae-font-ui); color: var(--ink-900); margin: 0 0 4px; letter-spacing: -0.01em; }
.article-edit-app .panel > header > div, .page-edit-app .panel > header > div { font: 400 14px var(--ae-font-ui); color: var(--ink-500); }
.article-edit-app .panel-sub, .page-edit-app .panel-sub { font: 400 14px var(--ae-font-ui); color: var(--ink-500); margin: 0 0 18px; }
.article-edit-app .panel-section, .page-edit-app .panel-section {
  margin: 0 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--ae-border);
  border-radius: 12px;
  background: var(--paper);
}
.article-edit-app .panel-section h3, .page-edit-app .panel-section h3 {
  font: 600 11.5px var(--ae-font-ui);
  color: var(--ink-500);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* ----- Templates tab ----- */
.article-edit-app .ae-templates-grid, .page-edit-app .ae-templates-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.article-edit-app .ae-template-card, .page-edit-app .ae-template-card {
  padding: 12px; border: 1px solid var(--ae-border); border-radius: 10px;
  background: var(--paper); text-align: left; cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.article-edit-app .ae-template-card:hover, .page-edit-app .ae-template-card:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--ae-shadow-md); }
.article-edit-app .ae-template-card.is-active, .page-edit-app .ae-template-card.is-active { box-shadow: 0 0 0 3px var(--accent-50); border-color: var(--accent); }
.article-edit-app .ae-template-head, .page-edit-app .ae-template-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.article-edit-app .ae-template-swatch, .page-edit-app .ae-template-swatch { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; }
.article-edit-app .ae-template-name, .page-edit-app .ae-template-name { font: 700 14px var(--ae-font-ui); color: var(--ink-900); }
.article-edit-app .ae-template-desc, .page-edit-app .ae-template-desc { font: 400 12.5px var(--ae-font-ui); color: var(--ink-500); margin-top: 2px; }
.article-edit-app .ae-template-foot, .page-edit-app .ae-template-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.article-edit-app .ae-template-pill, .page-edit-app .ae-template-pill { font: 600 10px var(--ae-font-ui); padding: 3px 9px; border-radius: 999px; border: 1px solid; letter-spacing: 0.08em; text-transform: uppercase; }
.article-edit-app .ae-template-read, .page-edit-app .ae-template-read { font: 500 11px var(--ae-font-ui); color: var(--ink-500); }

/* ----- Share tab -----
 * Ported from docs/design_handoff_article_creation/share-panel.jsx +
 * styles.css. Sections: embed config (.embed-config), embed code tabs
 * (.embed-code), live card preview (.embed-card-preview), social platform
 * previews (.share-preview), head-tags inspector (.meta-block). */

/* Embed config (Theme + Width segs, Show* toggles) */
.article-edit-app .embed-config, .page-edit-app .embed-config { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.article-edit-app .embed-config-row, .page-edit-app .embed-config-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.article-edit-app .embed-config-row.embed-config-toggles, .page-edit-app .embed-config-row.embed-config-toggles { gap: 18px 22px; padding-top: 4px; }
.article-edit-app .embed-config-label, .page-edit-app .embed-config-label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); min-width: 60px; }
.article-edit-app .embed-toggle, .page-edit-app .embed-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--ink-700); white-space: nowrap; }

/* Embed code tabs + block + hint */
.article-edit-app .embed-code, .page-edit-app .embed-code { border: 1px solid var(--ae-border); border-radius: 10px; overflow: hidden; background: var(--paper); }
.article-edit-app .embed-code-tabs, .page-edit-app .embed-code-tabs { display: flex; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--ae-border); background: var(--ae-hover); }
.article-edit-app .embed-code-tabs button[data-snip], .page-edit-app .embed-code-tabs button[data-snip] {
  background: transparent; border: 0; padding: 6px 12px; border-radius: 6px;
  font: 500 12px var(--ae-font-ui); color: var(--ink-600); cursor: pointer;
}
.article-edit-app .embed-code-tabs button[data-snip].is-active, .page-edit-app .embed-code-tabs button[data-snip].is-active { background: var(--accent-50); color: var(--accent-700); }
.article-edit-app .embed-code-tabs button[data-snip]:hover:not(.is-active), .page-edit-app .embed-code-tabs button[data-snip]:hover:not(.is-active) { background: var(--ae-border); color: var(--ink-800); }
.article-edit-app .embed-code-block, .page-edit-app .embed-code-block {
  /* Hard-coded terminal-dark for the same reason as the editor pre — keep
     the code block readable in both light + dark themes. */
  background: #14171f; color: #e6e8ee; padding: 12px 14px; margin: 0;
  font: 400 12px var(--ae-font-mono); overflow: auto; max-height: 220px;
  border-radius: 0;
}
.article-edit-app .embed-code-hint, .page-edit-app .embed-code-hint {
  padding: 10px 14px; border-top: 1px solid var(--ae-border);
  font: 400 12.5px var(--ae-font-ui); color: var(--ink-500); background: var(--paper);
}
.article-edit-app .embed-code-hint code, .page-edit-app .embed-code-hint code { background: var(--ink-100); padding: 1px 5px; border-radius: 3px; font: 400 11.5px var(--ae-font-mono); }

/* Live card preview */
.article-edit-app .embed-live, .page-edit-app .embed-live { margin-top: 14px; }
.article-edit-app .embed-live-label, .page-edit-app .embed-live-label {
  font: 500 11px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 8px;
}
.article-edit-app .embed-live-label span, .page-edit-app .embed-live-label span { color: var(--ink-400); font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.article-edit-app .embed-live-wrap, .page-edit-app .embed-live-wrap {
  padding: 16px; border-radius: 10px; background: var(--ae-hover);
  display: flex; justify-content: center;
}
.article-edit-app .embed-card-preview, .page-edit-app .embed-card-preview {
  background: var(--paper); border: 1px solid var(--ae-border); border-radius: 12px;
  overflow: hidden; box-shadow: var(--ae-shadow-sm);
}
.article-edit-app .embed-card-preview.is-dark, .page-edit-app .embed-card-preview.is-dark { background: #14171f; color: #e6e8ee; border-color: #20242e; }
.article-edit-app .embed-card-preview .embed-cover, .page-edit-app .embed-card-preview .embed-cover {
  width: 100%; aspect-ratio: 1200/630; background-size: cover; background-position: center;
  background-color: var(--ink-150);
}
.article-edit-app .embed-card-preview .embed-body-pad, .page-edit-app .embed-card-preview .embed-body-pad { padding: 22px 24px 20px; }
.article-edit-app .embed-card-preview .embed-eyebrow, .page-edit-app .embed-card-preview .embed-eyebrow {
  font: 500 11px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 8px;
}
.article-edit-app .embed-card-preview .embed-title, .page-edit-app .embed-card-preview .embed-title {
  font: 700 22px/1.25 var(--ae-font-ui); color: var(--ink-900); margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.article-edit-app .embed-card-preview.is-dark .embed-title, .page-edit-app .embed-card-preview.is-dark .embed-title { color: #f4f5f8; }
.article-edit-app .embed-card-preview .embed-excerpt, .page-edit-app .embed-card-preview .embed-excerpt {
  font: 400 14px/1.55 var(--ae-font-ui); color: var(--ink-600); margin: 0 0 12px;
}
.article-edit-app .embed-card-preview.is-dark .embed-excerpt, .page-edit-app .embed-card-preview.is-dark .embed-excerpt { color: #b9bdc8; }
.article-edit-app .embed-card-preview .embed-meta, .page-edit-app .embed-card-preview .embed-meta {
  font: 400 12.5px var(--ae-font-ui); color: var(--ink-500); margin-bottom: 14px;
}
.article-edit-app .embed-card-preview .embed-author, .page-edit-app .embed-card-preview .embed-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--ae-border);
}
.article-edit-app .embed-card-preview.is-dark .embed-author, .page-edit-app .embed-card-preview.is-dark .embed-author { border-top-color: #20242e; }
.article-edit-app .embed-card-preview .embed-author-photo, .page-edit-app .embed-card-preview .embed-author-photo {
  width: 32px; height: 32px; border-radius: 50%; background-color: var(--ink-200);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px var(--ae-font-ui); color: var(--ink-700);
}
.article-edit-app .embed-card-preview .embed-author-text, .page-edit-app .embed-card-preview .embed-author-text { flex: 1; min-width: 0; }
.article-edit-app .embed-card-preview .embed-author-name, .page-edit-app .embed-card-preview .embed-author-name { font: 600 13.5px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .embed-card-preview.is-dark .embed-author-name, .page-edit-app .embed-card-preview.is-dark .embed-author-name { color: #f4f5f8; }
.article-edit-app .embed-card-preview .embed-author-tag, .page-edit-app .embed-card-preview .embed-author-tag { font: 400 12px var(--ae-font-ui); color: var(--ink-500); }
.article-edit-app .embed-card-preview .embed-read-on, .page-edit-app .embed-card-preview .embed-read-on {
  font: 500 12.5px var(--ae-font-ui); color: var(--accent);
  flex-shrink: 0;
}

/* Social platform previews */
.article-edit-app .share-previews, .page-edit-app .share-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.article-edit-app .share-preview, .page-edit-app .share-preview { font: 400 13px var(--ae-font-ui); }
.article-edit-app .share-preview-head, .page-edit-app .share-preview-head {
  font: 500 11px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 6px;
}
.article-edit-app .share-preview-body, .page-edit-app .share-preview-body { border-radius: 12px; overflow: hidden; border: 1px solid var(--ae-border); background: var(--paper); }
/* WhatsApp */
.article-edit-app .share-preview-whatsapp .share-preview-body, .page-edit-app .share-preview-whatsapp .share-preview-body { background: #d9fdd3; border-color: #b8e8ad; padding: 8px; }
.article-edit-app .wa-bubble, .page-edit-app .wa-bubble { background: var(--paper); border-radius: 8px; padding: 8px; }
.article-edit-app .wa-link, .page-edit-app .wa-link { display: flex; gap: 10px; }
.article-edit-app .wa-img, .page-edit-app .wa-img { width: 64px; height: 64px; flex-shrink: 0; background-size: cover; background-position: center; border-radius: 6px; background-color: var(--ink-150); }
.article-edit-app .wa-meta, .page-edit-app .wa-meta { min-width: 0; flex: 1; }
.article-edit-app .wa-title, .page-edit-app .wa-title { font-weight: 600; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-edit-app .wa-desc, .page-edit-app .wa-desc { font-size: 12.5px; color: var(--ink-600); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.article-edit-app .wa-host, .page-edit-app .wa-host { font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }
.article-edit-app .wa-url, .page-edit-app .wa-url { font-size: 12px; color: #027eb5; margin-top: 6px; padding: 0 4px; word-break: break-all; }
/* iMessage */
.article-edit-app .share-preview-imessage .share-preview-body, .page-edit-app .share-preview-imessage .share-preview-body { background: #e9e9eb; padding: 10px; }
.article-edit-app .im-bubble, .page-edit-app .im-bubble { background: var(--paper); border-radius: 14px; overflow: hidden; }
.article-edit-app .im-img, .page-edit-app .im-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--ink-150); }
.article-edit-app .im-meta, .page-edit-app .im-meta { padding: 8px 12px; }
.article-edit-app .im-host, .page-edit-app .im-host { font-size: 11.5px; color: #5a5a5e; }
.article-edit-app .im-title, .page-edit-app .im-title { font-size: 13px; color: #000; font-weight: 500; margin-top: 2px; }
/* Slack */
.article-edit-app .share-preview-slack .share-preview-body, .page-edit-app .share-preview-slack .share-preview-body { padding: 12px; }
.article-edit-app .sl-msg, .page-edit-app .sl-msg { display: flex; gap: 10px; }
.article-edit-app .sl-avatar, .page-edit-app .sl-avatar { width: 36px; height: 36px; flex-shrink: 0; background: #4f46e5; color: #fff; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.article-edit-app .sl-body, .page-edit-app .sl-body { flex: 1; min-width: 0; }
.article-edit-app .sl-name, .page-edit-app .sl-name { font: 700 14px var(--ae-font-ui); color: var(--ink-900); }
.article-edit-app .sl-time, .page-edit-app .sl-time { font: 400 12px var(--ae-font-ui); color: var(--ink-500); margin-left: 6px; }
.article-edit-app .sl-text, .page-edit-app .sl-text { font-size: 13.5px; color: var(--ink-800); margin: 2px 0 6px; }
.article-edit-app .sl-text a, .page-edit-app .sl-text a { color: #1264a3; }
.article-edit-app .sl-unfurl, .page-edit-app .sl-unfurl { border-left: 4px solid #1264a3; padding: 8px 10px; background: var(--ae-hover); border-radius: 4px; }
.article-edit-app .sl-unfurl-host, .page-edit-app .sl-unfurl-host { font-size: 11.5px; color: var(--ink-500); }
.article-edit-app .sl-unfurl-title, .page-edit-app .sl-unfurl-title { font-weight: 600; color: var(--ink-800); margin-top: 2px; }
.article-edit-app .sl-unfurl-desc, .page-edit-app .sl-unfurl-desc { font-size: 12.5px; color: var(--ink-600); margin-top: 2px; }
.article-edit-app .sl-unfurl-img, .page-edit-app .sl-unfurl-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; border-radius: 4px; margin-top: 6px; background-color: var(--ink-150); }
/* X / Twitter */
.article-edit-app .share-preview-twitter .share-preview-body, .page-edit-app .share-preview-twitter .share-preview-body { padding: 12px; }
.article-edit-app .tw-tweet, .page-edit-app .tw-tweet { font: 400 14px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .tw-head, .page-edit-app .tw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.article-edit-app .tw-avatar, .page-edit-app .tw-avatar { width: 32px; height: 32px; border-radius: 50%; background: #4f46e5; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.article-edit-app .tw-name b, .page-edit-app .tw-name b { font-weight: 700; }
.article-edit-app .tw-name span, .page-edit-app .tw-name span { color: var(--ink-500); margin-left: 6px; font-size: 13px; }
.article-edit-app .tw-text, .page-edit-app .tw-text { font-size: 14px; margin-bottom: 8px; }
.article-edit-app .tw-card, .page-edit-app .tw-card { border: 1px solid var(--ae-border); border-radius: 12px; overflow: hidden; }
.article-edit-app .tw-card.is-large, .page-edit-app .tw-card.is-large { display: flex; flex-direction: column; }
.article-edit-app .tw-card.is-small, .page-edit-app .tw-card.is-small { display: grid; grid-template-columns: 110px 1fr; }
.article-edit-app .tw-card-img, .page-edit-app .tw-card-img { background-size: cover; background-position: center; background-color: var(--ink-150); }
.article-edit-app .tw-card.is-large .tw-card-img, .page-edit-app .tw-card.is-large .tw-card-img { width: 100%; aspect-ratio: 1.91/1; }
.article-edit-app .tw-card.is-small .tw-card-img, .page-edit-app .tw-card.is-small .tw-card-img { height: 110px; }
.article-edit-app .tw-card-meta, .page-edit-app .tw-card-meta { padding: 8px 12px; }
.article-edit-app .tw-card-host, .page-edit-app .tw-card-host { font-size: 11.5px; color: var(--ink-500); }
.article-edit-app .tw-card-title, .page-edit-app .tw-card-title { font-weight: 500; color: var(--ink-800); margin-top: 2px; }
.article-edit-app .tw-card-desc, .page-edit-app .tw-card-desc { font-size: 12.5px; color: var(--ink-600); margin-top: 2px; }
/* LinkedIn */
.article-edit-app .share-preview-linkedin .share-preview-body, .page-edit-app .share-preview-linkedin .share-preview-body { padding: 12px; }
.article-edit-app .li-head, .page-edit-app .li-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.article-edit-app .li-avatar, .page-edit-app .li-avatar { width: 40px; height: 40px; border-radius: 50%; background: #0a66c2; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.article-edit-app .li-name, .page-edit-app .li-name { font: 600 14px var(--ae-font-ui); color: var(--ink-900); }
.article-edit-app .li-sub, .page-edit-app .li-sub { font: 400 12px var(--ae-font-ui); color: var(--ink-500); }
.article-edit-app .li-card, .page-edit-app .li-card { border: 1px solid var(--ae-border); border-radius: 6px; overflow: hidden; }
.article-edit-app .li-img, .page-edit-app .li-img { width: 100%; aspect-ratio: 1.91/1; background-size: cover; background-position: center; background-color: var(--ink-150); }
.article-edit-app .li-meta, .page-edit-app .li-meta { padding: 10px 12px; background: var(--paper); }
.article-edit-app .li-title, .page-edit-app .li-title { font-weight: 600; color: var(--ink-800); }
.article-edit-app .li-host, .page-edit-app .li-host { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

/* Generated <head> tags block */
.article-edit-app .meta-block, .page-edit-app .meta-block { border: 1px solid var(--ae-border); border-radius: 10px; overflow: hidden; }
.article-edit-app .meta-block-head, .page-edit-app .meta-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--ae-hover); border-bottom: 1px solid var(--ae-border);
}
.article-edit-app .meta-block-label, .page-edit-app .meta-block-label { font: 500 11px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }

/* ----- SEO tab ----- */
.article-edit-app .ae-seo-snippet, .page-edit-app .ae-seo-snippet {
  border: 1px solid var(--ae-border); border-radius: 10px; padding: 14px 16px;
  background: var(--paper); font-family: arial, sans-serif;
}
.article-edit-app .ae-seo-snippet-url, .page-edit-app .ae-seo-snippet-url { color: #5b6172; font-size: 13px; margin-bottom: 4px; }
.article-edit-app .ae-seo-snippet-title, .page-edit-app .ae-seo-snippet-title { color: #1a0dab; font-size: 20px; line-height: 1.3; font-weight: 400; margin-bottom: 4px; }
.article-edit-app .ae-seo-snippet-desc, .page-edit-app .ae-seo-snippet-desc { color: #4d5156; font-size: 14px; line-height: 1.55; }
.article-edit-app .ae-seo-meter, .page-edit-app .ae-seo-meter {
  position: relative; margin-top: 8px; padding-top: 8px;
  font: 500 12px var(--ae-font-ui); color: var(--ink-500);
}
.article-edit-app .ae-seo-meter::before, .page-edit-app .ae-seo-meter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--ink-150); border-radius: 999px;
}
.article-edit-app .ae-seo-meter::after, .page-edit-app .ae-seo-meter::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: var(--meter-pct, 0%); height: 3px;
  background: var(--ink-300); border-radius: 999px;
  transition: width 120ms ease, background 120ms ease;
}
.article-edit-app .ae-seo-meter[data-tone="ok"]::after, .page-edit-app .ae-seo-meter[data-tone="ok"]::after { background: #10b981; }
.article-edit-app .ae-seo-meter[data-tone="ok"], .page-edit-app .ae-seo-meter[data-tone="ok"] { color: #059669; }
.article-edit-app .ae-seo-meter[data-tone="warn"]::after, .page-edit-app .ae-seo-meter[data-tone="warn"]::after { background: #f59e0b; }
.article-edit-app .ae-seo-meter[data-tone="warn"], .page-edit-app .ae-seo-meter[data-tone="warn"] { color: #b45309; }
.article-edit-app .ae-seo-meter[data-tone="over"]::after, .page-edit-app .ae-seo-meter[data-tone="over"]::after { background: #ef4444; }
.article-edit-app .ae-seo-meter[data-tone="over"], .page-edit-app .ae-seo-meter[data-tone="over"] { color: #dc2626; }

/* ----- History tab ----- */
.article-edit-app .ae-version-empty, .page-edit-app .ae-version-empty {
  text-align: center; color: var(--ink-500);
  font: 400 14px var(--ae-font-ui); padding: 32px 20px;
}
.article-edit-app .ae-version-list, .page-edit-app .ae-version-list { display: flex; flex-direction: column; gap: 2px; }

/* Current-draft header — sits in its own panel-section above the list,
   not clickable, distinguished by accent background. Same row shape as
   list rows so the column alignment lines up visually. */
.article-edit-app .ae-version-current, .page-edit-app .ae-version-current {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--accent-50); border: 1px solid var(--accent-100);
}

/* Revision rows — no longer clickable as a whole; the Restore button is the
   only affordance. Hover background remains for visual scan. */
.article-edit-app .ae-version-item, .page-edit-app .ae-version-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid transparent;
}
.article-edit-app .ae-version-item:hover, .page-edit-app .ae-version-item:hover { background: var(--ae-hover); }
.article-edit-app .ae-version-dot, .page-edit-app .ae-version-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-300); flex-shrink: 0; }
.article-edit-app .ae-version-dot.is-live, .page-edit-app .ae-version-dot.is-live { background: var(--accent); }
.article-edit-app .ae-version-dot.is-manual, .page-edit-app .ae-version-dot.is-manual { background: var(--success, #10b981); }
.article-edit-app .ae-version-dot.is-pre-restore, .page-edit-app .ae-version-dot.is-pre-restore { background: var(--warning, #f59e0b); }
.article-edit-app .ae-version-meta, .page-edit-app .ae-version-meta { flex: 1; min-width: 0; }
.article-edit-app .ae-version-title, .page-edit-app .ae-version-title { font: 600 13px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .ae-version-current .ae-version-title, .page-edit-app .ae-version-current .ae-version-title { color: var(--accent-700); }
.article-edit-app .ae-version-sub, .page-edit-app .ae-version-sub { font: 400 12px var(--ae-font-ui); color: var(--ink-500); margin-top: 2px; }
.article-edit-app .ae-version-restore, .page-edit-app .ae-version-restore { flex-shrink: 0; margin-left: auto; }

/* ----- Settings tab ----- */
.article-edit-app .ae-settings-publish-grid, .page-edit-app .ae-settings-publish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) {
  .article-edit-app .ae-settings-publish-grid, .page-edit-app .ae-settings-publish-grid { grid-template-columns: 1fr; }
}
.article-edit-app .ae-link-btn, .page-edit-app .ae-link-btn {
  background: transparent; border: 0; padding: 0; margin-top: 8px;
  color: var(--accent-700); font: 500 13px var(--ae-font-ui); cursor: pointer;
}
.article-edit-app .ae-link-btn:hover, .page-edit-app .ae-link-btn:hover { text-decoration: underline; }
.article-edit-app .ae-tags-input, .page-edit-app .ae-tags-input { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--ae-border); border-radius: 6px; }
.article-edit-app .ae-tag-chip, .page-edit-app .ae-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-50); color: var(--accent-700);
  font: 500 12px var(--ae-font-ui);
}
.article-edit-app .ae-tag-chip button, .page-edit-app .ae-tag-chip button { background: transparent; border: 0; color: inherit; cursor: pointer; }
.article-edit-app .ae-tags-input input, .page-edit-app .ae-tags-input input { flex: 1; min-width: 80px; border: 0; outline: 0; font: 400 14px var(--ae-font-ui); }

/* Layout-specific blocks (Classic / Split / HeroOverlay / Longform / PhotoEssay / Magazine)
 * live below this comment. Each renderer in assets/js/ui/layouts/<id>.js produces
 * <article class="ae-layout-<id>">…</article>; these blocks style it.
 */

/* ============================================================
 * Preview-pane layouts. Each renderer in assets/js/ui/layouts/<id>.js
 * produces <article class="ae-layout-<id>">.
 *
 * WYSIWYG goal: every block-level element Tiptap emits inside .ae-body
 * gets rendered exactly the way it'll appear on the partner reader page.
 * Body typography lives in `.ae-body :is(p, h1, h2, h3, …)` below.
 * ============================================================ */

/* Shared body-content typography — ported from the design handoff's
 * .article-preview ruleset (docs/design_handoff_article_creation/styles.css
 * sections "Article preview" + "Layout variants"). Selectors are scoped to
 * [class*="ae-layout-"] so all 6 layouts share the same render. */
.article-edit-app [class*="ae-layout-"] .ae-body, .page-edit-app [class*="ae-layout-"] .ae-body { font: 400 16px/1.7 var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app [class*="ae-layout-"] .ae-body p, .page-edit-app [class*="ae-layout-"] .ae-body p { margin: 0 0 1.1em; }
.article-edit-app [class*="ae-layout-"] .ae-body h1, .page-edit-app [class*="ae-layout-"] .ae-body h1 { font: 800 36px/1.15 var(--ae-font-ui); letter-spacing: -0.02em; color: var(--ink-900); margin: 14px 0 14px; }
.article-edit-app [class*="ae-layout-"] .ae-body h2, .page-edit-app [class*="ae-layout-"] .ae-body h2 { font: 600 24px/1.3 var(--ae-font-ui); letter-spacing: -0.015em; color: var(--ink-900); margin: 1.8em 0 0.5em; }
.article-edit-app [class*="ae-layout-"] .ae-body h3, .page-edit-app [class*="ae-layout-"] .ae-body h3 { font: 600 18px/1.3 var(--ae-font-ui); color: var(--ink-900); margin: 1.5em 0 0.4em; }
.article-edit-app [class*="ae-layout-"] .ae-body ul, .article-edit-app [class*="ae-layout-"] .ae-body ol, .page-edit-app [class*="ae-layout-"] .ae-body ul, .page-edit-app [class*="ae-layout-"] .ae-body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.article-edit-app [class*="ae-layout-"] .ae-body li, .page-edit-app [class*="ae-layout-"] .ae-body li { margin: 0.3em 0; }
.article-edit-app [class*="ae-layout-"] .ae-body blockquote, .page-edit-app [class*="ae-layout-"] .ae-body blockquote {
  margin: 1.2em 0; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--accent);
  color: var(--ink-600); font-style: italic;
  font: 400 18px/1.5 var(--ae-font-serif);
}
.article-edit-app [class*="ae-layout-"] .ae-body pre, .page-edit-app [class*="ae-layout-"] .ae-body pre {
  /* Hard-coded terminal-dark — see editor `pre` rule for why we don't
     use `--ink-900` here (it inverts in dark mode). */
  background: #14171f; color: #e6e8ee; padding: 18px 20px;
  border-radius: 10px; overflow-x: auto;
  font: 400 13px/1.6 var(--ae-font-mono);
  margin: 1.2em 0;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.article-edit-app [class*="ae-layout-"] .ae-body pre[data-lang]::before, .page-edit-app [class*="ae-layout-"] .ae-body pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 10px; right: 14px;
  font: 600 10.5px var(--ae-font-ui); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-400);
}
.article-edit-app [class*="ae-layout-"] .ae-body code:not(pre code), .page-edit-app [class*="ae-layout-"] .ae-body code:not(pre code) {
  background: var(--ink-100); padding: 1px 5px; border-radius: 4px;
  font: 400 0.9em var(--ae-font-mono); color: var(--ink-800);
}
.article-edit-app [class*="ae-layout-"] .ae-body pre code, .page-edit-app [class*="ae-layout-"] .ae-body pre code { background: transparent; padding: 0; color: inherit; font-size: 13px; }
.article-edit-app [class*="ae-layout-"] .ae-body a, .page-edit-app [class*="ae-layout-"] .ae-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-edit-app [class*="ae-layout-"] .ae-body strong, .page-edit-app [class*="ae-layout-"] .ae-body strong { font-weight: 700; color: var(--ink-900); }
.article-edit-app [class*="ae-layout-"] .ae-body table, .page-edit-app [class*="ae-layout-"] .ae-body table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 14px; }
.article-edit-app [class*="ae-layout-"] .ae-body th, .article-edit-app [class*="ae-layout-"] .ae-body td, .page-edit-app [class*="ae-layout-"] .ae-body th, .page-edit-app [class*="ae-layout-"] .ae-body td { border: 1px solid var(--ae-border); padding: 9px 13px; text-align: left; }
.article-edit-app [class*="ae-layout-"] .ae-body th, .page-edit-app [class*="ae-layout-"] .ae-body th { background: var(--ink-50); font-weight: 600; }
.article-edit-app [class*="ae-layout-"] .ae-body img, .page-edit-app [class*="ae-layout-"] .ae-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.2em 0; display: block; }
.article-edit-app [class*="ae-layout-"] .ae-body figure, .page-edit-app [class*="ae-layout-"] .ae-body figure { margin: 1.4em 0; }
.article-edit-app [class*="ae-layout-"] .ae-body figure img, .page-edit-app [class*="ae-layout-"] .ae-body figure img { margin: 0; }
.article-edit-app [class*="ae-layout-"] .ae-body figcaption, .page-edit-app [class*="ae-layout-"] .ae-body figcaption { font: 400 italic 13.5px var(--ae-font-ui); color: var(--ink-500); margin-top: 6px; text-align: center; }
.article-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-size="s"], .page-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-size="s"] { width: 50%; }
.article-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-size="m"], .page-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-size="m"] { width: 75%; }
.article-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-align="center"], .page-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-align="center"] { margin-left: auto; margin-right: auto; }
.article-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-align="right"], .page-edit-app [class*="ae-layout-"] .ae-body figure.embedded-figure[data-align="right"] { margin-left: auto; margin-right: 0; }
/* Callouts — design uses a vertical stripe rendered as a flex child via
 * ::before, plus bordered tinted bg. */
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"], .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"] {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; margin: 1.4em 0;
  border-radius: 12px; border: 1px solid var(--ae-border);
  background: var(--ink-50);
}
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"]::before, .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"]::before {
  content: ''; flex-shrink: 0; align-self: stretch;
  width: 4px; border-radius: 4px; background: var(--ink-300);
}
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="info"], .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="info"] { background: #eef4ff; border-color: #d6e4ff; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="info"]::before, .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="info"]::before { background: #3b82f6; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="success"], .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="success"] { background: #ecfdf5; border-color: #d1fae5; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="success"]::before, .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="success"]::before { background: #10b981; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="warning"], .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="warning"] { background: #fffbeb; border-color: #fde68a; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="warning"]::before, .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="warning"]::before { background: #f59e0b; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="danger"], .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="danger"] { background: #fef2f2; border-color: #fecaca; }
.article-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="danger"]::before, .page-edit-app [class*="ae-layout-"] .ae-body aside[data-block="callout"][data-tone="danger"]::before { background: #ef4444; }
.article-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"], .page-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--ae-border); border-radius: 10px;
  background: var(--ink-50); margin: 1.4em 0;
}
.article-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-icon, .page-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-icon { font-size: 22px; color: var(--accent); }
.article-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-host, .page-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-host { font: 600 13px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-url, .page-edit-app [class*="ae-layout-"] .ae-body div[data-block="embed"] .embed-url { font: 400 12px var(--ae-font-mono); color: var(--ink-500); margin-top: 2px; }
/* hr (both plain and data-block=divider) renders as a thin line with a
 * "· · ·" glyph centered on top via ::after with --paper backdrop. */
.article-edit-app [class*="ae-layout-"] .ae-body hr, .page-edit-app [class*="ae-layout-"] .ae-body hr {
  border: 0; height: 1px; background: var(--ae-border);
  margin: 2em 0; position: relative;
}
.article-edit-app [class*="ae-layout-"] .ae-body hr::after, .page-edit-app [class*="ae-layout-"] .ae-body hr::after {
  content: '· · ·'; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%); background: var(--paper);
  padding: 0 12px; color: var(--ink-300); letter-spacing: 0.4em;
}

/* Shared layout chrome — avatar / byline / tag chips / author card.
 * Mirror the design's .author-photo / .byline-row / .tag-row / .author-card. */
.article-edit-app [class*="ae-layout-"] .ae-avatar, .page-edit-app [class*="ae-layout-"] .ae-avatar { width: 36px; height: 36px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--ink-150); flex-shrink: 0; }
.article-edit-app [class*="ae-layout-"] .ae-byline, .page-edit-app [class*="ae-layout-"] .ae-byline { display: flex; align-items: center; gap: 12px; margin: 14px 0 24px; padding: 12px 0; border-top: 1px solid var(--ae-border); border-bottom: 1px solid var(--ae-border); }
.article-edit-app [class*="ae-layout-"] .ae-byline > div, .page-edit-app [class*="ae-layout-"] .ae-byline > div { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.article-edit-app [class*="ae-layout-"] .ae-byline .ae-name, .page-edit-app [class*="ae-layout-"] .ae-byline .ae-name { font: 600 14px var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app [class*="ae-layout-"] .ae-byline .ae-meta, .page-edit-app [class*="ae-layout-"] .ae-byline .ae-meta { font: 400 13px var(--ae-font-ui); color: var(--ink-500); margin-left: 10px; position: relative; padding-left: 14px; }
.article-edit-app [class*="ae-layout-"] .ae-byline .ae-meta::before, .page-edit-app [class*="ae-layout-"] .ae-byline .ae-meta::before { content: '·'; position: absolute; left: 0; color: var(--ink-400); }
.article-edit-app [class*="ae-layout-"] .ae-tags, .page-edit-app [class*="ae-layout-"] .ae-tags { margin: 28px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.article-edit-app [class*="ae-layout-"] .ae-tags .ae-tag-chip, .page-edit-app [class*="ae-layout-"] .ae-tags .ae-tag-chip { background: var(--ink-100); color: var(--ink-700); padding: 5px 12px; border-radius: 999px; font: 500 12px var(--ae-font-ui); }
.article-edit-app [class*="ae-layout-"] .ae-author-card, .page-edit-app [class*="ae-layout-"] .ae-author-card { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--ae-border); border-radius: 12px; background: var(--ink-50); margin-top: 32px; }
.article-edit-app [class*="ae-layout-"] .ae-author-card .ae-avatar, .page-edit-app [class*="ae-layout-"] .ae-author-card .ae-avatar { width: 56px; height: 56px; align-self: flex-start; }
.article-edit-app [class*="ae-layout-"] .ae-author-card .ae-name, .page-edit-app [class*="ae-layout-"] .ae-author-card .ae-name { font: 700 14px var(--ae-font-ui); color: var(--ink-900); }
.article-edit-app [class*="ae-layout-"] .ae-author-card .ae-tagline, .page-edit-app [class*="ae-layout-"] .ae-author-card .ae-tagline { font: 400 13px var(--ae-font-ui); color: var(--ink-500); margin-top: 2px; }
.article-edit-app [class*="ae-layout-"] .ae-author-card .ae-bio, .page-edit-app [class*="ae-layout-"] .ae-author-card .ae-bio { font: 400 13.5px/1.5 var(--ae-font-ui); color: var(--ink-600); margin-top: 8px; }

/* Layout: classic — design .article-preview spec. Cover image breaks out
 * of the body padding via negative margins. */
.article-edit-app .ae-layout-classic, .page-edit-app .ae-layout-classic { font: 400 16px/1.7 var(--ae-font-ui); color: var(--ink-800); }
.article-edit-app .ae-layout-classic .ae-body-wrap, .page-edit-app .ae-layout-classic .ae-body-wrap { padding: 40px 56px 64px; }
.article-edit-app .ae-layout-classic .ae-cover-banner, .page-edit-app .ae-layout-classic .ae-cover-banner {
  display: block; width: calc(100% + 112px); margin: -40px -56px 28px;
  height: 360px; object-fit: cover;
}
.article-edit-app .ae-layout-classic .ae-eyebrow, .page-edit-app .ae-layout-classic .ae-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12px var(--ae-font-ui); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.article-edit-app .ae-layout-classic .ae-title, .page-edit-app .ae-layout-classic .ae-title { font: 800 36px/1.15 var(--ae-font-ui); letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 14px; }
.article-edit-app .ae-layout-classic .ae-excerpt, .page-edit-app .ae-layout-classic .ae-excerpt { font: 400 19px/1.5 var(--ae-font-ui); color: var(--ink-500); margin: 0 0 24px; }

/* Layout: split (Editorial — design .ap-split). Two-column grid with a
 * sticky left meta column and a wider right body column. */
.article-edit-app .ae-layout-split, .page-edit-app .ae-layout-split { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr); }
.article-edit-app .ae-layout-split .ae-left, .page-edit-app .ae-layout-split .ae-left { background: var(--ink-50); padding: 56px 44px; border-right: 1px solid var(--ae-border); }
.article-edit-app .ae-layout-split .ae-left .ae-cover-banner, .page-edit-app .ae-layout-split .ae-left .ae-cover-banner {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; margin-bottom: 14px; display: block;
}
.article-edit-app .ae-layout-split .ae-left .ae-cover-placeholder, .page-edit-app .ae-layout-split .ae-left .ae-cover-placeholder {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-50), var(--accent-100));
  margin-bottom: 14px; position: relative;
}
.article-edit-app .ae-layout-split .ae-left .ae-cover-placeholder::after, .page-edit-app .ae-layout-split .ae-left .ae-cover-placeholder::after {
  content: ''; position: absolute; inset: 30%;
  border-radius: 50%; background: var(--accent);
  opacity: 0.18; filter: blur(20px);
}
.article-edit-app .ae-layout-split .ae-left .ae-eyebrow, .page-edit-app .ae-layout-split .ae-left .ae-eyebrow { display: inline-flex; font: 600 12px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 6px 0 6px; }
.article-edit-app .ae-layout-split .ae-left .ae-title, .page-edit-app .ae-layout-split .ae-left .ae-title { font: 700 30px/1.15 var(--ae-font-ui); letter-spacing: -0.015em; color: var(--ink-900); margin: 6px 0 0; }
.article-edit-app .ae-layout-split .ae-left .ae-excerpt, .page-edit-app .ae-layout-split .ae-left .ae-excerpt { font: 400 16px/1.5 var(--ae-font-ui); color: var(--ink-500); margin: 4px 0 0; }
.article-edit-app .ae-layout-split .ae-left .ae-byline, .page-edit-app .ae-layout-split .ae-left .ae-byline { margin: 14px 0 0; padding: 12px 0; border-top: 1px solid var(--ae-border); border-bottom: 1px solid var(--ae-border); }
.article-edit-app .ae-layout-split .ae-left .ae-tags, .page-edit-app .ae-layout-split .ae-left .ae-tags { margin: 14px 0 0; }
.article-edit-app .ae-layout-split .ae-right, .page-edit-app .ae-layout-split .ae-right { padding: 56px 56px 64px; }
@media (max-width: 760px) {
  .article-edit-app .ae-layout-split, .page-edit-app .ae-layout-split { grid-template-columns: 1fr; }
  .article-edit-app .ae-layout-split .ae-left, .page-edit-app .ae-layout-split .ae-left { padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--ae-border); }
  .article-edit-app .ae-layout-split .ae-right, .page-edit-app .ae-layout-split .ae-right { padding: 22px 18px; }
}

/* Layout: hero-overlay (design .ap-hero). Full-bleed banner with white text
 * + dark gradient, body below. */
.article-edit-app .ae-layout-hero-overlay .ae-hero, .page-edit-app .ae-layout-hero-overlay .ae-hero {
  background: linear-gradient(180deg, #20242e 0%, #0b0d12 100%);
  background-size: cover; background-position: center;
  color: white; padding: 100px 56px 48px;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.article-edit-app .ae-layout-hero-overlay .ae-hero-inner, .page-edit-app .ae-layout-hero-overlay .ae-hero-inner { max-width: 720px; }
.article-edit-app .ae-layout-hero-overlay .ae-eyebrow, .page-edit-app .ae-layout-hero-overlay .ae-eyebrow { display: inline-flex; font: 600 12px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin-bottom: 0; }
.article-edit-app .ae-layout-hero-overlay .ae-title, .page-edit-app .ae-layout-hero-overlay .ae-title { color: white !important; font: 800 48px/1.05 var(--ae-font-ui); letter-spacing: -0.025em; margin: 14px 0 16px; }
.article-edit-app .ae-layout-hero-overlay .ae-excerpt, .page-edit-app .ae-layout-hero-overlay .ae-excerpt { color: rgba(255,255,255,0.85); font: 400 19px/1.5 var(--ae-font-ui); margin: 0 0 26px; max-width: 600px; }
.article-edit-app .ae-layout-hero-overlay .ae-byline, .page-edit-app .ae-layout-hero-overlay .ae-byline { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.2); padding: 12px 0; margin: 0; }
.article-edit-app .ae-layout-hero-overlay .ae-byline .ae-name, .page-edit-app .ae-layout-hero-overlay .ae-byline .ae-name { color: white; }
.article-edit-app .ae-layout-hero-overlay .ae-byline .ae-meta, .page-edit-app .ae-layout-hero-overlay .ae-byline .ae-meta { color: rgba(255,255,255,0.7); }
.article-edit-app .ae-layout-hero-overlay .ae-byline .ae-avatar, .page-edit-app .ae-layout-hero-overlay .ae-byline .ae-avatar { border: 2px solid rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.2); }
.article-edit-app .ae-layout-hero-overlay .ae-body-wrap, .page-edit-app .ae-layout-hero-overlay .ae-body-wrap { padding: 44px 56px 64px; max-width: 760px; margin: 0 auto; }

/* Layout: longform (design .ap-longform). Centered narrow serif column. */
.article-edit-app .ae-layout-longform, .page-edit-app .ae-layout-longform { padding: 80px 0 64px; }
.article-edit-app .ae-layout-longform .ae-longform-head, .page-edit-app .ae-layout-longform .ae-longform-head { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.article-edit-app .ae-layout-longform .ae-title, .page-edit-app .ae-layout-longform .ae-title { font: 700 44px/1.1 var(--ae-font-serif); letter-spacing: -0.015em; color: var(--ink-900); margin: 12px 0; }
.article-edit-app .ae-layout-longform .ae-excerpt, .page-edit-app .ae-layout-longform .ae-excerpt { font: italic 400 20px/1.5 var(--ae-font-serif); color: var(--ink-500); text-align: center; max-width: 540px; margin: 0 auto 28px; }
.article-edit-app .ae-layout-longform .ae-byline, .page-edit-app .ae-layout-longform .ae-byline { justify-content: center; border-top: 0; border-bottom: 1px solid var(--ae-border); margin: 0 auto; padding: 0 0 16px; width: fit-content; }
.article-edit-app .ae-layout-longform .ae-body, .page-edit-app .ae-layout-longform .ae-body { max-width: 620px; margin: 36px auto 0; padding: 0 24px; font: 400 19px/1.75 var(--ae-font-serif); color: var(--ink-800); }
.article-edit-app .ae-layout-longform .ae-body > p:first-child::first-letter, .page-edit-app .ae-layout-longform .ae-body > p:first-child::first-letter {
  font-family: var(--ae-font-serif); float: left;
  font-size: 72px; line-height: 0.85; padding: 8px 10px 0 0;
  font-weight: 700; color: var(--accent);
}
.article-edit-app .ae-layout-longform .ae-body h2, .page-edit-app .ae-layout-longform .ae-body h2 {
  font: 600 26px/1.3 var(--ae-font-serif); text-align: center; margin-top: 1.8em;
}
.article-edit-app .ae-layout-longform .ae-body h2::before, .page-edit-app .ae-layout-longform .ae-body h2::before {
  content: '· · ·'; display: block; letter-spacing: 0.5em;
  color: var(--ink-300); font: 400 14px var(--ae-font-ui);
  margin: 0.8em 0 0.4em;
}
.article-edit-app .ae-layout-longform .ae-body blockquote, .page-edit-app .ae-layout-longform .ae-body blockquote {
  text-align: center; border-left: 0; padding: 0 24px;
  margin: 1.6em auto; max-width: 520px;
  font-size: 22px; position: relative;
}
.article-edit-app .ae-layout-longform .ae-body blockquote::before, .page-edit-app .ae-layout-longform .ae-body blockquote::before {
  content: '“'; display: block; font: 700 60px/0.5 var(--ae-font-serif);
  margin-bottom: 16px; color: var(--accent);
}
.article-edit-app .ae-layout-longform .ae-author-card,
.page-edit-app .ae-layout-longform .ae-author-card,
.article-edit-app .ae-layout-longform .ae-tags, .page-edit-app .ae-layout-longform .ae-tags { max-width: 620px; margin: 28px auto 0; padding: 0 24px; }
.article-edit-app .ae-layout-longform .ae-tags, .page-edit-app .ae-layout-longform .ae-tags { justify-content: center; }

/* Layout: photo-essay (design .ap-photo-essay). Tall cover + breakout figures. */
.article-edit-app .ae-layout-photo-essay .ae-cover-tall, .page-edit-app .ae-layout-photo-essay .ae-cover-tall {
  display: block; width: 100%; height: 520px; object-fit: cover; margin: 0;
}
.article-edit-app .ae-layout-photo-essay .ae-photo-head, .page-edit-app .ae-layout-photo-essay .ae-photo-head { max-width: 720px; margin: 0 auto; padding: 48px 32px 12px; }
.article-edit-app .ae-layout-photo-essay .ae-eyebrow, .page-edit-app .ae-layout-photo-essay .ae-eyebrow { display: inline-flex; font: 600 12px var(--ae-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.article-edit-app .ae-layout-photo-essay .ae-title, .page-edit-app .ae-layout-photo-essay .ae-title { font: 800 40px/1.15 var(--ae-font-ui); letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 14px; }
.article-edit-app .ae-layout-photo-essay .ae-excerpt, .page-edit-app .ae-layout-photo-essay .ae-excerpt { font: 400 19px/1.5 var(--ae-font-ui); color: var(--ink-500); margin: 0 0 24px; }
.article-edit-app .ae-layout-photo-essay .ae-body, .page-edit-app .ae-layout-photo-essay .ae-body { max-width: 720px; margin: 0 auto; padding: 0 32px 64px; }
.article-edit-app .ae-layout-photo-essay .ae-body h2, .page-edit-app .ae-layout-photo-essay .ae-body h2 {
  font: 700 14px var(--ae-font-ui); text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent); margin: 2.2em 0 0.4em;
}
.article-edit-app .ae-layout-photo-essay .ae-body figure, .page-edit-app .ae-layout-photo-essay .ae-body figure { margin: 1.6em -32px; }
.article-edit-app .ae-layout-photo-essay .ae-body figure img, .page-edit-app .ae-layout-photo-essay .ae-body figure img { border-radius: 0; width: 100%; display: block; }
.article-edit-app .ae-layout-photo-essay .ae-body figcaption, .page-edit-app .ae-layout-photo-essay .ae-body figcaption { padding: 8px 32px 0; text-align: left; font: italic 400 14px var(--ae-font-serif); }
.article-edit-app .ae-layout-photo-essay .ae-tags, .page-edit-app .ae-layout-photo-essay .ae-tags { max-width: 720px; margin: 28px auto 0; padding: 0 32px; }
.article-edit-app .ae-layout-photo-essay .ae-author-card, .page-edit-app .ae-layout-photo-essay .ae-author-card { max-width: 720px; margin: 32px auto; }

/* Layout: magazine (design .ap-magazine). Display serif + drop-cap + pull-quote. */
.article-edit-app .ae-layout-magazine, .page-edit-app .ae-layout-magazine { padding: 56px 0 64px; }
.article-edit-app .ae-layout-magazine .ae-magazine-head, .page-edit-app .ae-layout-magazine .ae-magazine-head { max-width: 800px; margin: 0 auto; padding: 0 40px; text-align: center; }
.article-edit-app .ae-layout-magazine .ae-magazine-meta, .page-edit-app .ae-layout-magazine .ae-magazine-meta {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 600 11px var(--ae-font-ui); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-500);
}
.article-edit-app .ae-layout-magazine .ae-magazine-meta .ae-eyebrow, .page-edit-app .ae-layout-magazine .ae-magazine-meta .ae-eyebrow { color: var(--accent); font-size: 11px; letter-spacing: 0.18em; }
.article-edit-app .ae-layout-magazine .ae-magazine-issue, .page-edit-app .ae-layout-magazine .ae-magazine-issue { color: var(--ink-400); }
.article-edit-app .ae-layout-magazine .ae-title, .page-edit-app .ae-layout-magazine .ae-title { font: 700 64px/1.02 var(--ae-font-serif); letter-spacing: -0.025em; color: var(--ink-900); margin: 28px 0 24px; }
.article-edit-app .ae-layout-magazine .ae-excerpt, .page-edit-app .ae-layout-magazine .ae-excerpt { font: italic 400 22px/1.45 var(--ae-font-serif); color: var(--ink-500); max-width: 580px; margin: 0 auto 32px; }
.article-edit-app .ae-layout-magazine .ae-rule, .page-edit-app .ae-layout-magazine .ae-rule { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 16px; }
.article-edit-app .ae-layout-magazine .ae-byline, .page-edit-app .ae-layout-magazine .ae-byline { display: flex; justify-content: center; gap: 12px; font: 400 13px var(--ae-font-ui); color: var(--ink-500); margin: 0 0 36px; border: 0; padding: 0; }
.article-edit-app .ae-layout-magazine .ae-magazine-figure, .page-edit-app .ae-layout-magazine .ae-magazine-figure { max-width: 1040px; margin: 0 auto 40px; padding: 0 40px; }
.article-edit-app .ae-layout-magazine .ae-magazine-figure img, .page-edit-app .ae-layout-magazine .ae-magazine-figure img { width: 100%; height: 460px; object-fit: cover; border-radius: 4px; display: block; }
.article-edit-app .ae-layout-magazine .ae-body, .page-edit-app .ae-layout-magazine .ae-body { max-width: 680px; margin: 0 auto; padding: 0 40px; }
.article-edit-app .ae-layout-magazine .ae-body > p:first-child::first-letter, .page-edit-app .ae-layout-magazine .ae-body > p:first-child::first-letter {
  float: left; font: 700 86px/0.85 var(--ae-font-serif);
  margin: 6px 12px 0 0; color: var(--accent);
}
.article-edit-app .ae-layout-magazine .ae-body blockquote:first-of-type, .page-edit-app .ae-layout-magazine .ae-body blockquote:first-of-type {
  font: italic 600 26px/1.4 var(--ae-font-serif); text-align: center;
  border-left: 0; padding: 16px 0; margin: 0 0 28px; color: var(--ink-800);
}
.article-edit-app .ae-layout-magazine .ae-author-card,
.page-edit-app .ae-layout-magazine .ae-author-card,
.article-edit-app .ae-layout-magazine .ae-tags, .page-edit-app .ae-layout-magazine .ae-tags { max-width: 680px; margin: 28px auto; padding: 0 40px; }