/* ==========================================================================
   ao-writer-doc.css — the Around OECTA Writer's doc layout (the redesign, direction A "Document first", approved 2026-11-03).
   Loaded right after ao-writer.css, admin only until the redesign's Phase 8. Every rule is scoped #ao-writer.aow--pm.aow--doc, so
   nothing here reaches the classic layout or the GrapesJS shell.
   Colours: --aow-* aliases and token-based color-mix() of them, nothing else (the member page loads no console.css and its
   --oecta-* roles flip under body.dark-mode while the Writer's surfaces stay light; see the alias block in ao-writer.css). On the
   navy band the pair is --aow-band and --aow-on-band; navy as a line on the paper is --aow-focus or --aow-sel-ink, which flip in
   admin dark. Where a classic rule on a shared element is more specific, the selector repeats its chain; the browser gate checks
   the computed result (tools/verify-ao-writer-doc-browser.mjs).
   ========================================================================== */

#ao-writer.aow--pm.aow--doc .aow-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#ao-writer.aow--pm.aow--doc .aow-mono { font: 500 12px/16px var(--aow-mono); }

/* ── The bar: navy, 56 px, one row ───────────────────────────────────────────────────────────────────────────────────────── */
#ao-writer.aow--pm.aow--doc .aow-bar {
  flex: none; position: relative; z-index: 8; box-sizing: border-box; height: var(--aow-head-h);
  display: flex; align-items: center; gap: 8px; padding: 0 12px 0 10px;
  background: var(--aow-band); color: var(--aow-on-band);
}
#ao-writer.aow--pm.aow--doc .aow-bar-lead { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding-left: 4px; }
#ao-writer.aow--pm.aow--doc .aow-bar-section,
#ao-writer.aow--pm.aow--doc .aow-bar h1.aow-doc-title {
  flex: 0 1 auto; min-width: 0; max-width: 520px; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--aow-on-band) !important; font-family: Manrope, Inter, sans-serif !important; font-weight: 700; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.005em;
}
#ao-writer.aow--pm.aow--doc .aow-bar-section[hidden],
#ao-writer.aow--pm.aow--doc .aow-bar h1.aow-doc-title[hidden] { display: none; }
/* The status keeps its words and the title gives way first, as the board draws it (review R2: the words used to shrink to nothing). */
#ao-writer.aow--pm.aow--doc .aow-bar-status {
  flex: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 500 12.5px/16px Inter, system-ui, sans-serif; color: color-mix(in srgb, var(--aow-on-band) 86%, transparent);
}
#ao-writer.aow--pm.aow--doc .aow-status-chip,
#ao-writer.aow--pm.aow--doc .aow-version-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 20px; box-sizing: border-box; padding: 0 8px; margin: 0; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--aow-on-band) 14%, transparent); color: var(--aow-on-band);
  font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none;
}
#ao-writer.aow--pm.aow--doc .aow-status-chip { padding-left: 7px; }
/* A long version name ends in an ellipsis; the chip's title holds the whole name. */
#ao-writer.aow--pm.aow--doc .aow-version-chip { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
#ao-writer.aow--pm.aow--doc .aow-status-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--aow-on-band) 78%, transparent);
}
#ao-writer.aow--pm.aow--doc .aow-autosave-indicator {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--aow-on-band) 86%, transparent); font: inherit;
}
#ao-writer.aow--pm.aow--doc .aow-autosave-indicator.is-dirty,
#ao-writer.aow--pm.aow--doc .aow-autosave-indicator.is-saving { color: var(--aow-attn-on-navy); }

/* The right cluster. A <button> keeps the browser's border and fill unless the rule names the button itself. */
#ao-writer.aow--pm.aow--doc .aow-bar-moves { flex: none; display: flex; align-items: center; gap: 8px; }
#ao-writer.aow--pm.aow--doc .aow-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 12px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aow-on-band);
  font: 600 13px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
#ao-writer.aow--pm.aow--doc .aow-bar-icon { width: 36px; min-width: 36px; min-height: 36px; padding: 0; flex: none; }
#ao-writer.aow--pm.aow--doc .aow-bar-btn:hover,
#ao-writer.aow--pm.aow--doc .aow-bar-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--aow-on-band) 14%, transparent); color: var(--aow-on-band); }
#ao-writer.aow--pm.aow--doc .aow-publishing-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px 0 15px; margin: 0;
  border: 0; border-radius: 8px; background: var(--aow-on-band); color: var(--aow-band);
  font: 700 13.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
#ao-writer.aow--pm.aow--doc .aow-publishing-btn:hover { background: color-mix(in srgb, var(--aow-band) 10%, var(--aow-on-band)); }
/* Done and Publish: amber as a fill, dark ink on it, never amber words. */
#ao-writer.aow--pm.aow--doc .aow-done-btn,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-height: 36px; padding: 0 18px; margin: 0;
  border: 0; border-radius: 8px; background: var(--aow-accent-fill); color: var(--aow-on-accent);
  font: 700 13.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
#ao-writer.aow--pm.aow--doc .aow-done-btn:hover,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn:hover { background: var(--aow-accent); }
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn.is-unpublish,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-cta-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; min-height: 36px; padding: 0 14px; margin: 0;
  border: 0; border-radius: 8px; background: color-mix(in srgb, var(--aow-on-band) 14%, transparent); color: var(--aow-on-band);
  font: 600 13px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: none;
}
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn.is-unpublish:hover,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-cta-btn:hover { background: color-mix(in srgb, var(--aow-on-band) 22%, transparent); }
#ao-writer.aow--pm.aow--doc .aow-bar .aow-cta-btn[hidden],
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn[hidden] { display: none; }
/* While a save runs: the bar's buttons look as unavailable as classic's (review R5). */
#ao-writer.aow--pm.aow--doc .aow-publishing-btn:disabled,
#ao-writer.aow--pm.aow--doc .aow-done-btn:disabled,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn:disabled,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-cta-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Colleagues: circles and note in one element until the co-editing lane's two-mount change (plan §1.8). */
#ao-writer.aow--pm.aow--doc .aow-bar-peers { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; margin: 0 2px; }
#ao-writer.aow--pm.aow--doc .aow-bar-peers:not(:has(.aow-peer-pills:not([hidden]))) { display: none; }
#ao-writer.aow--pm.aow--doc .aow-peer-pills { min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0; }
#ao-writer.aow--pm.aow--doc .aow-peer-pills[hidden] { display: none !important; }
#ao-writer.aow--pm.aow--doc .aow-peer-pill {
  position: relative; isolation: isolate;
  flex: none; width: 30px; height: 30px; margin: 0; border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--aow-on-band);
  display: inline-flex; align-items: center; justify-content: center; color: var(--aow-on-band); font: 700 13px/1 Inter, system-ui, sans-serif;
}
/* The letter is white, as the board draws it. The hue arrives inline and can be any presence hue (a yellow one gives 2.7:1 with white), so
   the navy lies between the fill and the letter, the same 55 to 45 as the caret's name flag. The browser gate measures every hue. */
#ao-writer.aow--pm.aow--doc .aow-peer-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--aow-band); opacity: 0.45; }
#ao-writer.aow--pm.aow--doc .aow-peer-note {
  min-width: 0; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 500 12.5px/16px Inter, system-ui, sans-serif; color: color-mix(in srgb, var(--aow-on-band) 86%, transparent);
}

/* The tablet bar (769-1100 px): Preview and Share are in More (the shell moves them). The title gives way first; the chips stay whole
   and only the note is cut, to a width that still reads (its title holds the whole line). */
#ao-writer.aow--pm.aow--doc.aow-bar-narrow .aow-version-chip { max-width: 120px; }
#ao-writer.aow--pm.aow--doc.aow-bar-narrow .aow-autosave-indicator { max-width: 112px; }
#ao-writer.aow--pm.aow--doc.aow-bar-narrow .aow-peer-note { max-width: 120px; }

/* ── More: the Writer's menu (a member-safe twin of .con-menu, DESIGN-SYSTEM.md ledger) ─────────────────────────────────────── */
#ao-writer.aow--pm.aow--doc .aow-menu {
  position: absolute; top: 60px; right: 12px; z-index: 9; width: 236px; box-sizing: border-box; padding: 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--aow-card) 80%, transparent); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--aow-shadow-menu); color: var(--aow-ink);
}
#ao-writer.aow--pm.aow--doc .aow-menu[hidden] { display: none; }
#ao-writer.aow--pm.aow--doc .aow-menu-sep { height: 6px; }
#ao-writer.aow--pm.aow--doc .aow-menu-sep[hidden],
#ao-writer.aow--pm.aow--doc .aow-more-narrow[hidden] { display: none; }
#ao-writer.aow--pm.aow--doc .aow-mi {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%; height: 38px; box-sizing: border-box; padding: 0 10px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aow-ink);
  font: 500 14px/1 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; box-shadow: none;
}
#ao-writer.aow--pm.aow--doc .aow-mi:hover { background: color-mix(in srgb, var(--aow-sel-ink) 7%, var(--aow-card)); color: var(--aow-ink); }
#ao-writer.aow--pm.aow--doc .aow-mi-label { flex: 1 1 auto; min-width: 0; }
#ao-writer.aow--pm.aow--doc .aow-mi .aow-ic { flex: none; color: var(--aow-ink-body); }

/* ── The page ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
#ao-writer.aow--pm.aow--doc .aow-main {
  flex: 1 1 auto; min-height: 0; position: relative; overflow-x: hidden; overflow-y: auto; background: var(--aow-surface);
  scroll-padding-top: 72px; padding: 0 24px 48px;
}
#ao-writer.aow--pm.aow--doc .aow-toolbar-row {
  position: sticky; top: 0; z-index: 5; margin: 0 -24px; padding: 10px 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--aow-surface) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (prefers-reduced-transparency: reduce) {
  #ao-writer.aow--pm.aow--doc .aow-toolbar-row { background: var(--aow-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  #ao-writer.aow--pm.aow--doc .aow-menu { background: var(--aow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
#ao-writer.aow--pm.aow--doc .aow-history { flex: none; display: flex; align-items: center; gap: 2px; }
/* The Writer's icon button (a member-safe twin of .con-icon-btn, DESIGN-SYSTEM.md ledger) */
#ao-writer.aow--pm.aow--doc .aow-icon-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aow-ink-body); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
#ao-writer.aow--pm.aow--doc .aow-icon-btn:hover { background: color-mix(in srgb, var(--aow-sel-ink) 7%, var(--aow-card)); color: var(--aow-ink); }
#ao-writer.aow--pm.aow--doc .aow-icon-btn:disabled { background: transparent; color: var(--aow-disabled); cursor: default; }
/* A quiet button on a light surface */
#ao-writer.aow--pm.aow--doc .aow-quiet-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aow-ink-body);
  font: 600 13px/1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
#ao-writer.aow--pm.aow--doc .aow-quiet-btn:hover { background: color-mix(in srgb, var(--aow-sel-ink) 7%, var(--aow-card)); color: var(--aow-ink); }

/* The paper: 800 px, radius 12, padding 48. It also carries .aow-canvas-card, whose classic rule says padding 32 48 48 and 480 tall. */
#ao-writer.aow--pm.aow--doc .aow-paper.aow-canvas-card {
  display: block; position: relative; box-sizing: border-box; width: 100%; max-width: 800px; min-height: 0; margin: 8px auto 0; padding: 48px;
  border-radius: 12px; background: var(--aow-card); box-shadow: var(--aow-shadow-paper);
}
/* The story head. The title is Manrope 800 36 px by computed style: mobilecss.css sets input, select, textarea to 16 px !important in
   every browser (its iOS zoom guard), which is what kept the title at about 16 px; style2.css sets a field's fill, ink and focus shadow
   !important under body.dark-mode. Both sizes here clear the zoom guard, and the page's fields keep the paper. The browser gate reads them. */
#ao-writer.aow--pm.aow--doc .aow-story-head { margin: 0 0 30px; }
#ao-writer.aow--pm.aow--doc .aow-story-eyebrow {
  margin: 0 0 10px; color: var(--aow-muted); font: 600 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
#ao-writer.aow--pm.aow--doc .aow-story-eyebrow[hidden] { display: none; }
#ao-writer.aow--pm.aow--doc .aow-story-head textarea.aow-title-input {
  display: block; width: 100%; box-sizing: border-box; min-height: 42px; margin: 0 0 8px; padding: 0; border: 0; border-radius: 4px; outline: none; resize: none; overflow: hidden; background: transparent !important;
  color: var(--aow-ink) !important; font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 36px !important; line-height: 1.15; letter-spacing: -0.01em;
}
#ao-writer.aow--pm.aow--doc .aow-story-head textarea.aow-subtitle-input {
  display: block; width: 100%; box-sizing: border-box; min-height: 26px; margin: 0 0 16px; padding: 0; border: 0; border-radius: 4px; outline: none; resize: none; overflow: hidden; background: transparent !important;
  color: var(--aow-ink-2) !important; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 18px !important; line-height: 1.45;
}
#ao-writer.aow--pm.aow--doc .aow-story-head textarea.aow-title-input::placeholder,
#ao-writer.aow--pm.aow--doc .aow-story-head textarea.aow-subtitle-input::placeholder { color: var(--aow-muted) !important; opacity: 1; }
#ao-writer.aow--pm.aow--doc .aow-story-byline { display: flex; align-items: center; gap: 10px; color: var(--aow-muted); font: 400 14px/1.3 Inter, system-ui, sans-serif; }
#ao-writer.aow--pm.aow--doc .aow-byline-initials {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--aow-sunk); color: var(--aow-sel-ink); font: 700 11px/1 Inter, system-ui, sans-serif;
}
#ao-writer.aow--pm.aow--doc.aow-no-title #aow-doc-body { padding-top: 0; }
#ao-writer.aow--pm.aow--doc .aow-pm-surface { padding-top: 0; }

/* Admin dark: the paper goes dark, and the words of the blocks that draw no fill of their own follow it (ao-blocks.css fixes their ink on
   :root for a white page, 1.3:1 here). A block with its own card keeps its own colours. No effect on the member page: --aow-ink stays dark there. */
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--text,
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--heading,
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--quote,
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--columns,
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--image,
body.dark-mode #ao-writer.aow--pm.aow--doc .aow-pm-surface > section.aod-sec--image-text {
  --aod-ink: var(--aow-ink); --aod-muted: var(--aow-muted); --aod-navy: var(--aow-sel-ink);
}

/* A colleague's name flag sits in the gap above the line, on the caret (the engine's cursor plugin is untouched). */
#ao-writer.aow--pm.aow--doc .aow-pm-surface .aow-caret-label { top: auto; bottom: 100%; left: -2px; padding: 2px 6px 2px 5px; font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.15; }

/* ── The Details sheet (read-only on the office path; its summary comes with Phase 4) ─────────────────────────────────────────── */
#ao-writer.aow--pm.aow--doc .aow-sheet {
  position: absolute; top: var(--aow-head-h); right: 0; bottom: 0; z-index: 7; width: 368px; max-width: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--aow-card); color: var(--aow-ink); box-shadow: var(--aow-shadow-side);
}
#ao-writer.aow--pm.aow--doc .aow-sheet[hidden] { display: none; }
#ao-writer.aow--pm.aow--doc .aow-sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 20px; }
#ao-writer.aow--pm.aow--doc .aow-sheet-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--aow-ink); font: 800 18px/1.3 Manrope, Inter, sans-serif; }
#ao-writer.aow--pm.aow--doc .aow-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 20px; }
#ao-writer.aow--pm.aow--doc .aow-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
#ao-writer.aow--pm.aow--doc .aow-sheet-sub { margin: 0; color: var(--aow-ink); font: 600 14px/1.3 Inter, system-ui, sans-serif; }
/* The Writer's chip (a member-safe twin of .con-chip, DESIGN-SYSTEM.md ledger) */
#ao-writer.aow--pm.aow--doc .aow-chip {
  flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--aow-sunk); color: var(--aow-ink-body);
  font: 600 12px/1 Inter, system-ui, sans-serif; white-space: nowrap;
}
/* The slide-outs drawn from the classic builder sit under the bar here. */
#ao-writer.aow--pm.aow--doc > #aow-details,
#ao-writer.aow--pm.aow--doc > #aow-assistant { top: var(--aow-head-h); }
/* Closed, they wait past the window's edge; their shadow would still fall on the page. */
#ao-writer.aow--pm.aow--doc > #aow-details:not(.is-open),
#ao-writer.aow--pm.aow--doc > #aow-assistant:not(.is-open) { box-shadow: none; }
/* Review R1: Tab past the last control used to land in a closed sheet and scroll the whole Writer 420 px left, Back off the screen.
   Closed sheets leave the Tab order once their slide ends (visible at once when they open), and the root never scrolls sideways. */
#ao-writer.aow--pm.aow--doc { overflow: hidden; overflow: clip; }
#ao-writer.aow--pm.aow--doc > #aow-details:not(.is-open),
#ao-writer.aow--pm.aow--doc > #aow-assistant:not(.is-open) { visibility: hidden; transition-property: transform, visibility; }   /* classic's own slide timing; visibility flips at its end */
#ao-writer.aow--pm.aow--doc > #aow-details.is-open,
#ao-writer.aow--pm.aow--doc > #aow-assistant.is-open { visibility: visible; }

/* Review R3: the portal's toasts sit at the top right, on Publishing and More for 4 s after a save (and just under the bar they cover
   the toolbar). While a doc Writer is open they sit at the bottom right, over no control. The only rule here outside #ao-writer: it
   applies only while that Writer is on screen. */
body:has(#ao-writer.aow--pm.aow--doc:not([hidden])) #toast-container { top: auto; bottom: 20px; }

/* ── The interim page (Phase 1 only): the classic block bar, tray and panel, stacked under the paper until Phases 2a to 3 replace them. ── */
#ao-writer.aow--pm.aow--doc .aow-interim { max-width: 800px; margin: 16px auto 0; display: flex; flex-direction: column; gap: 12px; }
#ao-writer.aow--pm.aow--doc .aow-interim-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#ao-writer.aow--pm.aow--doc .aow-interim .aow-doc-block-bar { position: static; align-self: flex-start; }
#ao-writer.aow--pm.aow--doc .aow-interim .aow-doc-block-bar[hidden] { display: none; }
#ao-writer.aow--pm.aow--doc .aow-interim .aow-tray,
#ao-writer.aow--pm.aow--doc .aow-interim .aow-side { position: static; width: 100%; max-height: none; box-sizing: border-box; border-radius: 12px; overflow: visible; display: block; }
#ao-writer.aow--pm.aow--doc .aow-toolbar-row .aow-doc-toolbar { position: static; flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; margin: 0; border: 0; }

/* ── Focus: a ring with a gap, on the band and on the light surfaces. Contrast measured in three themes by the browser gate. ── */
#ao-writer.aow--pm.aow--doc .aow-bar-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-publishing-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-done-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-publish-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-bar .aow-cta-btn:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--aow-navy-deep), 0 0 0 4px var(--aow-on-band);
}
#ao-writer.aow--pm.aow--doc .aow-mi:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-icon-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-quiet-btn:focus-visible,
#ao-writer.aow--pm.aow--doc .aow-story-head textarea:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--aow-card), 0 0 0 4px var(--aow-focus) !important;
}