/*
 * AuthorFox components (DESIGN.md, concept C). Values come only from
 * tokens.css. Status always pairs colour with a word.
 */

/* Scoped to /app pages (body.ap-app-page, added by Task 11) so this sheet
   can load on every front-end request without restyling the rest of the
   hub — components.css also has to be available to the Bricks builder
   canvas, which is not an /app page. */
html:has(> body.ap-app-page) { font-size: 100%; }
body.ap-app-page { background: var(--ap-parchment); color: var(--ap-warm-ink); font-family: var(--ap-font-sans); font-size: 14px; line-height: 1.4; }
:where(.ap-app) a { color: var(--ap-stone-600); }
:where(.ap-app) a:hover { color: var(--ap-warm-ink); }
/* Focus (DESIGN.md): 2px warm-ink outline, 2px offset, never removed. An
   outline, not a box-shadow, so it survives forced-colors mode. */
:where(.ap-app, .ap-assistant) :focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; } /* the rail is printed on wp_footer, outside .ap-app */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ap-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--ap-radius-pill); background: var(--ap-ember); flex-shrink: 0; }

/* Layout: sidebar 248 · queue 360 · proof fluid · evidence 320.
   align-items: stretch restores the grid default that Bricks' .brxe-block
   (align-items: flex-start) overrides, so every column runs the full height:
   hairlines reach the foot, the user block sits at the sidebar foot and a
   short proof still puts the decision bar at the bottom (concept C). The
   sidebar stretches its children for the same reason: the switcher pill and
   its menu, and the nav items, span the sidebar as in concept C. */
.ap-app { display: grid; grid-template-columns: 248px 360px minmax(0, 1fr) 320px; align-items: stretch; min-height: 100vh; width: 100%; background: var(--ap-parchment); }
.ap-sidebar { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 16px; border-right: 1px solid var(--ap-stone-200); background: var(--ap-parchment); }
.ap-queue-col { display: flex; flex-direction: column; gap: 14px; padding: 28px 16px; border-right: 1px solid var(--ap-stone-200); }
.ap-proof-col { display: flex; flex-direction: column; gap: 20px; padding: 40px 56px 0; background: var(--ap-paper); border-right: 1px solid var(--ap-stone-200); min-width: 0; }
.ap-evidence-col { display: flex; flex-direction: column; gap: 14px; padding: 32px 20px; }

/* The AuthorFox lockup (DESIGN.md Brand); the element's text stays for
   screen readers and is moved out of view. */
.ap-mark { display: block; width: 116px; height: 36px; margin: 0 8px; background: url(../images/authorfox-logo.webp) left center / contain no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }
/* Forced colours (Windows High Contrast) would put the navy lockup on a
   system ground where it can vanish, leaving a focusable link no one sees.
   The lockup keeps its paper ground as supplied (never recoloured), and a
   system-colour border marks the link. */
@media (forced-colors: active) {
	.ap-mark { forced-color-adjust: none; background-color: var(--ap-paper); border: 1px solid CanvasText; }
}

/* Bricks element roots. Each partial sits inside its element's root div
   (brxe-<element name>), a direct child of the column block, so the flex and
   sticky layout rules go on those roots. */
.ap-sidebar > .brxe-authorpilot-app-nav { flex-grow: 1; display: flex; flex-direction: column; }
/* The drawer (app-nav.php): the nav's wrapper, a native popover, so phones
   and small tablets get the nav as a sheet with no script. From 1024px it is
   a plain block that fills the sidebar: the browser's popover styles (not
   shown while closed, fixed and centred, a border) are all put back, and
   the Menu button and the drawer's head are not printed to the eye. The
   responsive block (DESIGN.md App shell → Phones and small tablets) turns
   the sidebar into a top bar and the open drawer into the sheet. */
.ap-drawer { display: flex; flex-direction: column; flex-grow: 1; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; overflow: visible; color: inherit; background: transparent; }
.ap-drawer__open, .ap-drawer__head { display: none; }
/* Above the proof's "Add picture here" spots (z-index 2), which would
   otherwise show through the bar as the article scrolls under it. */
.ap-proof-col > .brxe-authorpilot-decision-bar { position: sticky; bottom: 0; z-index: 3; margin-top: auto; align-self: stretch; }

/* Partial roots. The column gap applies only to the element roots, so each
   partial spaces its own parts: DESIGN.md element-gap (12px). The proof body
   sits 24px under the title (DESIGN.md Page header: 24px to the content). */
.ap-queue, .ap-evidence, .ap-proof-article { display: flex; flex-direction: column; gap: 12px; }
.ap-proof-article > .ap-proof { margin-top: 12px; }
/* Review's head row: the meta line and the Wide view toggle. */
/* Picture changes: a placed picture's Change picture button sits over its
   corner, shown on hover and keyboard focus (always below 1024px, no hover). */
.ap-proof__picture { position: relative; }
/* Over a photo the button needs its own surface: paper with ink, never the
   transparent ghost (whose later rule would otherwise win). */
.ap-proof__change { position: absolute; top: 32px; right: 12px; height: 32px; padding: 0 12px; font-size: 13px; opacity: 0; transition: opacity 150ms ease-out, background-color 150ms ease-out; }
.ap-proof__picture .ap-proof__change { background: var(--ap-paper); border-color: var(--ap-stone-200); color: var(--ap-warm-ink); }
.ap-proof__picture .ap-proof__change:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-proof__picture:hover .ap-proof__change, .ap-proof__change:focus-visible { opacity: 1; }
@media (hover: none), (max-width: 1023px) { .ap-proof__change { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ap-proof__change { transition: none; } }
.ap-picture-dialog .ap-field { display: flex; flex-direction: column; gap: 6px; }
.ap-picture-dialog textarea.ap-input { min-height: 72px; }
/* The picture dialog (spec 2026-10-15): a little wider than a confirmation
   for the three choices; each choice's part is a plain group (no fieldset
   frame) whose controls the script disables while it is hidden. The choice
   is a radio group drawn as the Performance page's period pills (below). */
.ap-modal.ap-picture-dialog { width: min(560px, calc(100vw - 32px)); }
.ap-picture-choice, .ap-picture-dialog__part, .ap-picture-dialog__rights { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-picture-choice { gap: 8px; }
.ap-picture-choice > legend, .ap-picture-dialog__rights > legend { margin-bottom: 8px; padding: 0; }
.ap-picture-choice__options { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-picture-choice[hidden], .ap-picture-dialog__part[hidden], .ap-picture-dialog__rights[hidden], .ap-picture-choice__option[hidden] { display: none; }
.ap-picture-dialog__rights .ap-check input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ap-warm-ink); }
.ap-picture-dialog input[type="file"].ap-input { height: auto; padding: 8px 12px; }
/* The picture dialog's rhythm (impeccable pass, 2026-10-29): a field's label, box and help line sit close (6px, then 4px) and fields sit 20px apart, so each help line reads as that field's own. Status is never help: it is a callout with an icon (the ideas panel, the list-first reason); the buttons' own notes sit under a hairline with the buttons. */
.ap-picture-dialog .ap-modal__form { gap: 20px; }
.ap-picture-dialog .ap-field .ap-help, .ap-picture-dialog .ap-picture-choice > .ap-help { margin-top: -2px; }
.ap-picture-dialog__part { gap: 20px; }
.ap-picture-dialog__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-picture-dialog__foot .ap-modal__actions { margin-top: 0; }
.ap-picture-dialog .ap-callout { padding: 10px 12px; font-size: 13px; line-height: 18px; }
.ap-callout__icon { display: inline-flex; flex: none; margin-top: 1px; }
.ap-callout__icon svg { width: 16px; height: 16px; }
.ap-callout[hidden] { display: none; }
/* Give me ideas (spec 2026-10-28): an inset panel under the box it fills. */
.ap-picture-ideas { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: var(--ap-radius); background: var(--ap-mist); }
.ap-picture-ideas__ask { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; }
.ap-picture-ideas__prompt { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-picture-ideas__ask .ap-btn { flex: none; background: var(--ap-paper); }
.ap-picture-ideas__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ap-stone-300); }
.ap-picture-ideas__list[hidden], .ap-picture-ideas__item [hidden] { display: none; }
.ap-picture-ideas__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 12px 0; border-bottom: 1px solid var(--ap-stone-300); }
.ap-picture-ideas__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ap-picture-ideas__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-picture-ideas__title { font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-picture-ideas__text { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-picture-ideas__item .ap-btn, .ap-picture-ideas__item .ap-badge { flex: none; }
.ap-picture-ideas__item .ap-btn { background: var(--ap-paper); }
.ap-picture-ideas__item .ap-badge svg { width: 12px; height: 12px; }
@media (max-width: 560px) { .ap-picture-ideas__ask, .ap-picture-ideas__item { flex-direction: column; align-items: flex-start; } }
@media (hover: none), (max-width: 1023px) { .ap-picture-ideas .ap-btn { min-height: 44px; } }
/* "Add picture here" (R6, R7): a row after each top-level block, printed by
   app.js. A spot with a new picture listed shows the dashed placeholder
   instead (DESIGN.md: suggested is a dashed stone-300 edge on paper). */
.ap-proof__spot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ap-proof__spot[hidden] { display: none; }
.ap-proof__add { height: 28px; padding: 0 12px; font-size: 13px; color: var(--ap-stone-600); }
.ap-proof__add > span { font-weight: 600; }
.ap-proof__add:disabled { color: var(--ap-stone-400); background: transparent; cursor: not-allowed; }
.ap-proof__placeholder--making, .ap-proof__placeholder--listed { flex-direction: column; gap: 4px; }
.ap-proof__placeholder-cancel { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.ap-proof__placeholder-cancel .ap-help { margin: 0; }
.ap-proof__placeholder--making strong, .ap-proof__placeholder--listed strong { font-weight: 600; color: var(--ap-warm-ink); }
.ap-proof__placeholder-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.ap-proof__placeholder { display: flex; align-items: center; justify-content: center; min-height: 96px; margin: 20px 0; padding: 16px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); background: var(--ap-paper); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); text-align: center; }
.ap-picture-changes__thumb--new { display: block; box-sizing: border-box; border: 1px dashed var(--ap-stone-300); background: var(--ap-paper); }
@media (hover: none), (max-width: 1023px) { .ap-proof__add { height: 44px; } .ap-picture-choice .ap-picture-choice__option span { min-height: 44px; } }
/* With a mouse (Magnus, 2026-10-15: "too intrusive"), the spots take no room:
   a zero-height block that margins collapse through, so the proof keeps the
   article's rhythm. Pointing at a block shows its button in the gap below it,
   on paper over the text edge; keyboard focus shows it too. Touch and narrow
   screens keep the visible rows above, as they cannot hover. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
	.ap-proof__spot { display: block; position: relative; height: 0; margin: 0; z-index: 2; }
	.ap-proof .ap-proof__add { position: absolute; left: 0; top: -7px; transform: translateY(-50%); height: 24px; padding: 0 10px; font-size: 12px; background: var(--ap-paper); opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
	.ap-proof__spot .ap-help { position: absolute; left: 0; top: 10px; margin: 0; padding: 2px 6px; background: var(--ap-paper); white-space: nowrap; opacity: 0; pointer-events: none; }
	.ap-proof > [data-ap-block]:hover + .ap-proof__spot > *, .ap-proof__spot:hover > *, .ap-proof__spot:focus-within > * { opacity: 1; pointer-events: auto; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: reduce) { .ap-proof .ap-proof__add { transition: none; } }
.ap-proof__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* The toggle shows expand arrows to widen and collapse arrows to go back. */
.ap-proof__wide { flex-shrink: 0; height: 32px; padding: 0 12px 0 10px; font-size: 13px; }
.ap-proof__wide > span { display: inline-flex; }
.ap-proof__wide .ap-proof__wide-on, .ap-app--wide .ap-proof__wide .ap-proof__wide-off { display: none; }
.ap-app--wide .ap-proof__wide .ap-proof__wide-on { display: inline-flex; }
/* Wide view (1024px and up): sidebar and proof only, the article centred. */
@media (min-width: 1024px) {
	/* The notice above the article follows the article's reading column. */
	.ap-app--wide .ap-proof-col > .brxe-authorpilot-flash-notice { align-self: stretch; }
	.ap-app--wide .ap-proof-col .ap-flash { box-sizing: border-box; width: 100%; max-width: 760px; margin-inline: auto; }
	.ap-app.ap-app--wide { grid-template-columns: 248px minmax(0, 1fr); }
	.ap-app--wide .ap-queue-col, .ap-app--wide .ap-evidence-col { display: none; }
	/* The element root shrinks to its content in the flex column; it spans the column so the article can centre. */
	.ap-app--wide .ap-proof-col > .brxe-authorpilot-review-proof { align-self: stretch; }
	/* One reading column, centred: title, text and pictures share its edges
	   (a measure in ch would differ per font size and stagger the headings). */
	.ap-app--wide .ap-proof-article { width: 100%; max-width: 760px; margin-inline: auto; }
	.ap-app--wide .ap-proof { max-width: none; }
}
.ap-proof > :first-child { margin-top: 0; }

/* Navigation (fills its element root; the user block pins to the bottom) */
.ap-nav { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; }
/* On hold (spec 2026-10-29 3.1): one status line above the nav, outside the drawer so a closed drawer never hides it. A Callout / inline notice in the warn set: 12px glyph and words together (colour is never the only signal), 13px/18px like the other warn lines; it wraps in the sidebar's width. Below 1024px it is a strip under the top bar (see the phones block). */
.ap-nav__hold { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 20px; padding: 8px 10px; border: 1px solid var(--ap-warn-border); border-radius: var(--ap-radius); background: var(--ap-warn-tint); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warn-700); }
.ap-nav__hold svg { flex: none; width: 12px; height: 12px; margin-top: 3px; }
.ap-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Nav groups (spec 2026-10-08 §3; DESIGN.md Help and navigation): three
   numbered white cards, 10px apart; the nav's 20px gap separates the block
   from Coming soon and the foot. */
.ap-nav__groups { display: flex; flex-direction: column; gap: 10px; }
.ap-nav__group { display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); }
.ap-nav__heading { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--ap-stone-200); font: 600 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); }
/* A card folds on its heading (native details, so it works without
   JavaScript). The chevron points down on a folded card and up on an open
   one. A folded card is the heading alone, without the hairline, rounded so
   its focus ring is too, and shows the total of the counts inside it; an
   open card's items show their own. */
.ap-nav__fold > summary { list-style: none; margin-bottom: 6px; cursor: pointer; }
.ap-nav__fold > summary::-webkit-details-marker { display: none; }
.ap-nav__fold:not([open]) > summary { margin-bottom: 0; padding-bottom: 4px; border-bottom-color: transparent; border-radius: var(--ap-radius); }
.ap-nav__label { display: flex; align-items: center; gap: 8px; flex-grow: 1; }
.ap-nav__chev { display: inline-flex; flex-shrink: 0; color: var(--ap-stone-500); transition: transform 120ms ease-out, color 120ms ease-out; }
.ap-nav__fold[open] .ap-nav__chev { transform: rotate(180deg); }
.ap-nav__heading:hover .ap-nav__chev, .ap-nav__heading:focus-visible .ap-nav__chev { color: var(--ap-warm-ink); }
.ap-nav__total { margin-left: 0; }
.ap-nav__fold[open] .ap-nav__total { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ap-nav__chev { transition: none; }
}
.ap-nav__step { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; border-radius: var(--ap-radius-pill); background: var(--ap-ember-tint); font: 600 11px/1 var(--ap-font-sans); color: var(--ap-ember-700); }
.ap-nav__item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; border-radius: var(--ap-radius); color: var(--ap-stone-600); font: 500 14px/1 var(--ap-font-sans); text-decoration: none; white-space: nowrap; }
.ap-nav__item.is-active { background: var(--ap-mist); color: var(--ap-warm-ink); }
/* A34 (DESIGN.md Motion): ghost rows pick up mist on hover, colour only, 120ms. */
.ap-nav__item:not(.is-disabled) { transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-nav__item:not(.is-disabled):hover { background: var(--ap-mist); color: var(--ap-warm-ink); }
/* Disabled items: margin-left: auto pushes "Coming soon" right; the 4px
   minimum gap keeps "Knowledge base" on one line in the 248px sidebar. */
/* Home is a plain item above the groups; the Next step card (hub wayfinding,
   2026-10-27) follows it: the one cream card in the sidebar, in the
   emphasis style (DESIGN.md Emphasis), so the thread reads first. */
.ap-nav__home { margin: 0 2px; }
.ap-nav__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow go" "label go" "detail go"; align-items: center; gap: 2px 8px; padding: 10px 10px 10px 14px; background: var(--ap-cream); border: 1px solid var(--ap-cream-border); border-radius: var(--ap-radius-raised); color: var(--ap-warm-ink); text-decoration: none; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.ap-nav__next:hover { border-color: var(--ap-ember-500); }
.ap-nav__next-eyebrow { grid-area: eyebrow; font: 600 11px/14px var(--ap-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-ember-700); }
.ap-nav__next-label { grid-area: label; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-nav__next-detail { grid-area: detail; font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-nav__next-go { grid-area: go; display: inline-flex; color: var(--ap-stone-500); transform: rotate(-90deg); transition: color 120ms ease-out; }
.ap-nav__next:hover .ap-nav__next-go { color: var(--ap-warm-ink); }
@media (prefers-reduced-motion: reduce) {
	.ap-nav__next, .ap-nav__next-go { transition: none; }
}
.ap-nav__count { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
/* The account card at the sidebar foot (account overview, 2026-10-28):
   one white card like the nav groups. Its first row is the way to the
   account page: the avatar, the person's name and "Account, plan and
   sign-in", and the chevron; under a hairline sit the small tools, the
   bell, the time zone and Sign out. */
.ap-nav__user { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); font: 500 13px/1.2 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-nav__me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: var(--ap-radius); color: var(--ap-warm-ink); text-decoration: none; transition: background-color 120ms ease-out; }
.ap-nav__me:hover, .ap-nav__me[aria-current="page"] { background: var(--ap-mist); }
.ap-nav__me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-nav__me-name { font: 600 14px/18px var(--ap-font-sans); color: var(--ap-warm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-nav__me-line { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-nav__me-go { display: inline-flex; color: var(--ap-stone-500); transform: rotate(-90deg); transition: color 120ms ease-out; }
.ap-nav__me-go svg { width: 14px; height: 14px; }
.ap-nav__me:hover .ap-nav__me-go, .ap-nav__me[aria-current="page"] .ap-nav__me-go { color: var(--ap-warm-ink); }
.ap-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--ap-radius-pill); background: var(--ap-warm-ink); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 var(--ap-font-sans); letter-spacing: 0.02em; color: var(--ap-paper); }
.ap-nav__tools { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 4px 0 0; border-top: 1px solid var(--ap-stone-200); }
.ap-nav__signout { margin-left: auto; display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: var(--ap-radius-pill); font: 400 12px/1 var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: none; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-nav__signout:hover { background: var(--ap-mist); color: var(--ap-warm-ink); }
@media (prefers-reduced-motion: reduce) {
	.ap-nav__me, .ap-nav__me-go, .ap-nav__signout { transition: none; }
}

/* The member's time zone (time zone plan 1, ruling ZR6): a quiet button in
   the account card's tools, opening a raised panel above the card.
   details/summary works without JS; zone.js only adds the browser button. */
.ap-zone { min-width: 0; }
.ap-zone__button { display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: var(--ap-radius-pill); list-style: none; font: 400 12px/1 var(--ap-font-sans); color: var(--ap-stone-600); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-zone__button::-webkit-details-marker { display: none; }
.ap-zone__button:hover, .ap-zone[open] > .ap-zone__button { background: var(--ap-mist); color: var(--ap-warm-ink); }
.ap-zone__panel { position: absolute; z-index: 10; bottom: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); box-shadow: var(--ap-shadow-raised); }
.ap-zone__title { margin: 0; font: 600 13px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-zone__panel .ap-input { width: 100%; min-width: 0; }
.ap-zone__panel .ap-btn { justify-content: center; }
.ap-zone__panel .ap-zone__browser { height: auto; min-height: 36px; padding: 8px 12px; font-size: 13px; line-height: 1.3; text-align: center; white-space: normal; }
.ap-zone__now { margin: -4px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font: 400 12px/1.4 var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-zone__now[hidden] { display: none; }
.ap-zone__now strong { font-weight: 600; color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-zone-equiv { margin: 4px 0 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
	.ap-zone__button { transition: none; }
}

/* Site switcher (details/summary works without JS) */
.ap-switcher { position: relative; }
.ap-switcher > summary { list-style: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); font: 500 14px/1 var(--ap-font-sans); cursor: pointer; }
.ap-switcher > summary::-webkit-details-marker { display: none; }
.ap-switcher__name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-switcher__menu { position: absolute; z-index: 10; top: 46px; left: 0; right: 0; padding: 8px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); box-shadow: var(--ap-shadow-raised); }
.ap-switcher__group { margin: 8px 8px 4px; font: 500 12px/1.3 var(--ap-font-sans); color: var(--ap-stone-600); text-transform: uppercase; letter-spacing: 0.04em; }
.ap-switcher__site { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; border-radius: var(--ap-radius); text-decoration: none; color: var(--ap-warm-ink); }
.ap-switcher__site:hover, .ap-switcher__site[aria-current="true"] { background: var(--ap-mist); }
.ap-switcher__label { flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.ap-switcher__icon { flex: none; width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.ap-switcher__tile { display: inline-grid; place-items: center; box-sizing: border-box; border: 1px solid var(--ap-stone-300); background: var(--ap-paper); color: var(--ap-warm-ink); font: 600 9px/1 var(--ap-font-sans); letter-spacing: 0.02em; }
.ap-switcher__add { margin-top: 4px; border-top: 1px solid var(--ap-stone-200); border-radius: 0 0 var(--ap-radius) var(--ap-radius); color: var(--ap-stone-600); font-weight: 500; }
.ap-switcher__add svg { width: 16px; height: 16px; }

/* Type */
.ap-title { margin: 0; font: 600 28px/1.25 var(--ap-font-serif); letter-spacing: -0.02em; color: var(--ap-warm-ink); }
.ap-title--lg { font-size: 34px; line-height: 1.2; letter-spacing: -0.03em; max-width: 24ch; }
.ap-title--sm { font-size: 20px; letter-spacing: -0.01em; }
.ap-meta { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }

/* Fox pictures (DESIGN.md Imagery): one per page, beside the title and in empty states */
.ap-titlerow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-art { display: block; flex: none; object-fit: contain; }
.ap-art--head { width: 64px; height: 64px; margin: -8px 0; }
/* Page frame (DESIGN.md → Page frame). A page has one headline at 28px. On a
   single-column page it is the page header: fox 64, title, meta, actions on
   the right, a rule below. On a list-and-detail page the list column carries
   a quieter column header (fox 40, title 20, one small action) and the detail
   pane's own title is the page's headline, so the two never compete. */
.ap-queue__head .ap-art--head { width: 40px; height: 40px; margin: -4px 0; }
.ap-queue__head .ap-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.ap-queue__head .ap-btn:not(.ap-btn--link) { height: 32px; padding: 0 12px; }
.ap-art--empty { width: 160px; height: 160px; }
.ap-art--hero { width: 200px; height: 200px; margin-bottom: 8px; }
@media (max-width: 767px) { .ap-art--head { width: 48px; height: 48px; margin: -4px 0; } .ap-art--hero { width: 160px; height: 160px; } }

/* Tabs */
.ap-tabs { display: flex; gap: 4px; padding: 0 8px; }
.ap-tabs a { padding: 6px 12px; border-radius: var(--ap-radius-pill); font: 500 13px/1 var(--ap-font-sans); text-decoration: none; color: var(--ap-stone-600); }
.ap-tabs a[aria-current="page"] { background: var(--ap-mist); color: var(--ap-warm-ink); }
/* A33: an inactive tab darkens on hover like any ghost pill; the class
   selector outranks the generic :where(.ap-app) a:hover. */
.ap-tabs a { transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-tabs a:hover { background: var(--ap-mist); color: var(--ap-warm-ink); }

/* Queue */
.ap-queue__head { padding: 0 8px; display: flex; flex-direction: column; gap: 6px; }
.ap-queue__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-queue__row { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--ap-radius); text-decoration: none; }
.ap-queue__row:hover { background: var(--ap-mist); }
/* The open item is the one warm surface of a list (DESIGN.md → Emphasis). */
.ap-queue__row[aria-current="page"] { background: var(--ap-cream); border-color: var(--ap-cream-border); }
.ap-queue__row[aria-current="page"]:hover { background: var(--ap-cream); }
.ap-queue__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-queue__title { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-queue__why { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-queue__age { font: 400 12px/1 var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-queue__more { padding: 8px 16px; font: 500 13px/1 var(--ap-font-sans); }
.ap-queue__new { align-self: flex-start; margin: 0 8px; }
.ap-queue__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 8px; }
.ap-queue__links .ap-queue__new { margin: 0; }
.ap-queue__links .ap-btn[aria-current="page"] { background: var(--ap-mist); border-color: var(--ap-stone-300); color: var(--ap-warm-ink); }

/* Badges (status set, DESIGN.md) */
.ap-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid; border-radius: var(--ap-radius-pill); font: 500 12px/16px var(--ap-font-sans); white-space: nowrap; }
.ap-badge--needs { color: var(--ap-ember-700); background: var(--ap-ember-tint); border-color: var(--ap-ember-border); }
.ap-badge--ok { color: var(--ap-ok-700); background: var(--ap-ok-tint); border-color: var(--ap-ok-border); }
.ap-badge--warn { color: var(--ap-warn-700); background: var(--ap-warn-tint); border-color: var(--ap-warn-border); }
.ap-badge--danger { color: var(--ap-danger-700); background: var(--ap-danger-tint); border-color: var(--ap-danger-border); }
.ap-badge--neutral { color: var(--ap-stone-700); background: var(--ap-mist); border-color: var(--ap-mist); }
.ap-badge--sched { color: var(--ap-warm-ink); background: var(--ap-paper); border-color: var(--ap-stone-300); }
.ap-badge--sugg { color: var(--ap-stone-700); background: var(--ap-paper); border-color: var(--ap-stone-300); border-style: dashed; }

/* Buttons */
.ap-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--ap-radius-pill); border: 1px solid transparent; font: 500 14px/1 var(--ap-font-sans); text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; white-space: nowrap; }
.ap-btn--primary { background: var(--ap-warm-ink); color: var(--ap-paper); }
.ap-btn--primary:hover { background: var(--ap-charcoal); color: var(--ap-paper); }
/* Dark pill focus (DESIGN.md Motion → Focus): a paper inner ring flush
   against the button (box-shadow, fills the 0-2px offset gap) plus a
   warm-ink outer ring (outline, drawn 2px further out). The outline -
   not the box-shadow - carries the outer, most-visible ring, so it
   survives forced-colors mode, where box-shadow is dropped. Two classes
   outrank the :where()-scoped generic rule above regardless of source
   order, so it is never overridden. */
.ap-btn--primary:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ap-paper); }
.ap-btn--ghost { background: transparent; border-color: var(--ap-stone-200); color: var(--ap-stone-700); }
.ap-btn--ghost:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-btn--danger { background: transparent; border-color: var(--ap-danger-border); color: var(--ap-danger-700); }
/* A button drawn as a Text Link (DESIGN.md Components): a dialog's trigger inside a sentence. */
.ap-btn--link { height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; transition: color 150ms ease-out; }
.ap-btn--link:hover { color: var(--ap-warm-ink); }
.ap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Icon button and row menu (DESIGN.md → Row menu). A row or a header keeps
   at most one visible secondary action; the rest sit behind a "⋯" that opens
   a small paper menu. The menu is a details element, so it works without
   script; app.js closes it on an outside click and on Escape. Dialogs opened
   from a menu item are printed after the menu (authorpilot_confirm_parts()),
   never inside it, because a closed details does not render its children. */
.ap-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-stone-600); cursor: pointer; list-style: none; transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
.ap-iconbtn::-webkit-details-marker { display: none; }
.ap-iconbtn svg { width: 18px; height: 18px; }
.ap-iconbtn:hover, .ap-menu[open] > .ap-iconbtn { background: var(--ap-mist); border-color: var(--ap-stone-300); color: var(--ap-warm-ink); }
.ap-menu { position: relative; display: inline-flex; }
.ap-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 184px; padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); background: var(--ap-paper); box-shadow: var(--ap-shadow-lift); }
.ap-menu__list > form { margin: 0; display: contents; }
.ap-menu__list .ap-btn { width: 100%; height: 36px; justify-content: flex-start; padding: 0 10px; border-color: transparent; border-radius: var(--ap-radius); background: transparent; color: var(--ap-warm-ink); font-weight: 400; white-space: nowrap; }
.ap-menu__list .ap-btn:hover { background: var(--ap-mist); border-color: transparent; }
.ap-menu__list .ap-btn--danger { color: var(--ap-danger-700); }
.ap-menu__list .ap-btn--danger:hover { background: var(--ap-danger-tint); }
.ap-menu__list .ap-btn[disabled] { color: var(--ap-stone-500); }
/* .ap-btn's display would otherwise override the hidden attribute (the
   queue's "N new" button starts hidden). */
.ap-btn[hidden] { display: none; }

/* Proof: customer article typography, scoped so it cannot restyle the shell */
.ap-proof { font: 400 17px/1.6 var(--ap-font-serif); color: var(--ap-stone-700); max-width: 68ch; }
.ap-proof :where(h2, h3, h4) { font-family: var(--ap-font-serif); font-weight: 600; color: var(--ap-warm-ink); letter-spacing: -0.01em; margin: 1.4em 0 0.4em; line-height: 1.25; text-wrap: balance; }
.ap-proof h2 { font-size: 28px; letter-spacing: -0.02em; } .ap-proof h3 { font-size: 20px; } .ap-proof h4 { font-size: 17px; }
/* DESIGN.md Responsive behavior: heading steps 28 → 22px on small screens (the draft page's and Review's proof alike). */
@media (max-width: 767px) { .ap-proof h2 { font-size: 22px; } }
.ap-proof p, .ap-proof ul, .ap-proof ol, .ap-proof blockquote { margin: 0 0 14px; }
.ap-proof figure { margin: 20px 0; }
.ap-proof img { display: block; max-width: 100%; height: auto; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
.ap-proof figcaption { margin-top: 8px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-proof blockquote { padding-left: 16px; border-left: 2px solid var(--ap-stone-300); }
.ap-proof a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
/* A table in the article (BlockRenderer core/table, class ap-table): DESIGN.md's data table — Paper in an 8px hairline, Inter (never Newsreader in a table), a small uppercase header row on Parchment, 44px rows with Stone-200 dividers, no zebra. */
.ap-proof .ap-table { margin: 20px 0; overflow-x: auto; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-proof .ap-table table { width: 100%; border-collapse: collapse; margin: 0; font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-proof .ap-table th, .ap-proof .ap-table td { padding: 12px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--ap-stone-200); }
/* 12px + one 14px/1.4 line + 12px is the 44px row; a cell that wraps grows. */
.ap-proof .ap-table thead th { padding: 14px 16px; font: 500 12px/16px var(--ap-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-stone-600); background: var(--ap-parchment); }
.ap-proof .ap-table tbody tr:last-child td { border-bottom: 0; }
.ap-proof .ap-table figcaption { padding: 0 16px 12px; margin-top: 0; }
/* A fact box (core/group, class ap-factoid): the callout — Mist on an 8px hairline, the title small and spaced with an Ember dot (Ember as a seal), the text in the reading role a step smaller. */
.ap-proof .ap-factoid { margin: 20px 0; padding: 20px 24px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-mist); }
.ap-proof .ap-factoid > p { margin: 0; font-size: 16px; }
.ap-proof .ap-factoid > p + p { margin-top: 8px; }
.ap-proof .ap-factoid__title { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--ap-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-stone-600); }
.ap-proof .ap-factoid__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--ap-ember); }
.ap-proof .ap-factoid__title strong { font-weight: inherit; }
/* The article elements (spec 2026-10-22): boxes share the fact box's look; the warning uses the warn status set; the stat's figure is a Newsreader display number. */
.ap-proof .ap-box { margin: 20px 0; padding: 20px 24px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-mist); }
.ap-proof .ap-box > p, .ap-proof .ap-box > ul, .ap-proof .ap-box > ol { margin: 0; font-size: 16px; }
.ap-proof .ap-box > * + * { margin-top: 8px; }
.ap-proof .ap-box__title, .ap-proof .ap-pros-cons__label { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--ap-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-stone-600); }
.ap-proof .ap-box__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--ap-ember); }
.ap-proof .ap-box__title strong, .ap-proof .ap-pros-cons__label strong { font-weight: inherit; }
.ap-proof .ap-box__list { padding-left: 20px; }
.ap-proof .ap-box--checklist .ap-box__list { list-style: none; padding-left: 0; }
.ap-proof .ap-box--checklist .ap-box__list li::before { content: "\2610"; margin-right: 8px; color: var(--ap-stone-500); }
.ap-proof .ap-box--toc { background: var(--ap-paper); }
.ap-proof .ap-toc li { margin: 4px 0; }
.ap-proof .ap-factoid--warning { background: var(--ap-warn-tint); border-color: var(--ap-warn-border, #fde68a); }
.ap-proof .ap-factoid--warning .ap-factoid__title { color: var(--ap-warn-700); }
.ap-proof .ap-factoid--warning .ap-factoid__title::before { background: var(--ap-warn-700); }
.ap-proof .ap-factoid > p.ap-factoid__figure { margin: 0; font: 600 34px/1.2 var(--ap-font-serif); letter-spacing: -0.03em; color: var(--ap-warm-ink); }
.ap-proof .ap-factoid__figure strong { font-weight: inherit; }
.ap-proof .ap-factoid--stat > p + p { margin-top: 4px; }
/* The pull quote: Newsreader at 22px between two hairlines, the cite in Inter. */
.ap-proof .ap-pullquote { margin: 28px 0; padding: 20px 0; border-top: 2px solid var(--ap-stone-300); border-bottom: 2px solid var(--ap-stone-300); }
.ap-proof .ap-pullquote blockquote { margin: 0; padding: 0; border: 0; }
.ap-proof .ap-pullquote p { margin: 0; font: 400 22px/1.4 var(--ap-font-serif); color: var(--ap-warm-ink); }
.ap-proof .ap-pullquote cite { display: block; margin-top: 8px; font: 400 13px/18px var(--ap-font-sans); font-style: normal; color: var(--ap-stone-600); }
/* FAQ: each question a hairline row that folds open; steps: numbered with the name in Inter 600; glossary: the term in Inter 600. */
.ap-proof .ap-faq > .ap-box__title { margin-bottom: 8px; }
.ap-proof .ap-faq details { padding: 10px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-proof .ap-faq summary { cursor: pointer; font: 500 15px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-proof .ap-faq details > p { margin: 8px 0 0; }
.ap-proof .ap-steps__list { padding-left: 0; list-style: none; counter-reset: ap-step; }
.ap-proof .ap-steps__list li { position: relative; padding-left: 40px; margin: 0 0 12px; counter-increment: ap-step; }
.ap-proof .ap-steps__list li::before { content: counter(ap-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; background: var(--ap-mist); font: 600 13px/28px var(--ap-font-sans); text-align: center; color: var(--ap-stone-700); }
.ap-proof .ap-steps__list li strong, .ap-proof .ap-glossary p strong { font: 600 15px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-proof .ap-glossary p { margin: 0 0 10px; }
/* Pros and cons: two columns on an 8px hairline from 600px. */
.ap-proof .ap-pros-cons { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 20px 0; }
@media (min-width: 600px) { .ap-proof .ap-pros-cons { grid-template-columns: 1fr 1fr; } .ap-proof .ap-pros-cons > .ap-box__title { grid-column: 1 / -1; } }
.ap-proof .ap-pros-cons__col { padding: 16px 20px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-proof .ap-pros-cons__col > ul { margin: 8px 0 0; padding-left: 20px; font-size: 16px; }
.ap-proof .ap-series-nav { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-proof .ap-series-nav a { color: var(--ap-warm-ink); }
/* An image slot with no placed asset (ProofRenderer): a dashed box, never a broken image */
.ap-unplaced { display: flex; align-items: center; justify-content: center; padding: 32px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); background: var(--ap-parchment); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }

/* Decision bar (its element root is the sticky child; the bar bleeds to the column edges).
   Review polish (2026-10-15): one row. Left, the ways back (Send back, a
   menu holding Request changes, Redo the pictures and Reject; then Hold);
   right, the one filled approve with its next free time, and Other times
   for the rest. An open menu takes the row's full width under it. */
.ap-decision { --ap-bar-gutter: 56px; margin: 0 calc(-1 * var(--ap-bar-gutter)); padding: 16px var(--ap-bar-gutter); border-top: 1px solid var(--ap-stone-200); background: var(--ap-paper); display: flex; flex-direction: column; gap: 12px; }
.ap-decision__meaning { margin: 0; font: 400 13px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-decision__fingerprint { padding: 1px 6px; border-radius: 8px; background: var(--ap-mist); font: 400 13px/18px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ap-stone-600); }
.ap-decision__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-decision__note svg { flex-shrink: 0; margin-top: 2px; }
.ap-decision__actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.ap-decision__secondary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ap-decision__secondary:has(> details[open]) { flex-basis: 100%; }
.ap-decision__secondary > details[open] { display: flex; flex-direction: column; align-items: flex-start; flex-basis: 100%; }
.ap-decision__secondary > details[open] > .ap-decision__menu { align-self: stretch; max-width: 640px; }
.ap-decision details > summary { list-style: none; }
.ap-decision details > summary::-webkit-details-marker { display: none; }
.ap-decision details > summary svg { width: 14px; height: 14px; margin-right: -4px; transition: transform 150ms ease-out; }
.ap-decision details[open] > summary svg { transform: rotate(180deg); }
/* A menu (Send back, Other times): a paper panel with a hairline, under its pill. */
.ap-decision__menu { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 12px 16px 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); }
.ap-decision__menu > .ap-help { margin: 0; }
.ap-decision__form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 0; max-width: 560px; }
.ap-decision__form label { font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-decision__form textarea { min-height: 72px; padding: 10px 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-decision__form textarea:focus { border-color: var(--ap-warm-ink); }
/* Reject and Request changes: what is wrong, as checkboxes (5a-1 Task 5). One column; two from 720px. */
.ap-decision__categories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ap-decision__categories > legend { margin-bottom: 6px; padding: 0; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-decision__form .ap-check, .ap-check { display: flex; align-items: flex-start; gap: 8px; font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); cursor: pointer; }
.ap-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ap-warm-ink); }
.ap-check[hidden] { display: none; }
@media (min-width: 720px) {
	.ap-decision__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-decision__categories > legend { grid-column: 1 / -1; }
}
/* The Send back dialog (2026-10-28): one question, three choice cards and a
   red "Reject instead"; only the chosen card's part and button show (:has). */
.ap-modal.ap-sendback { width: min(560px, calc(100vw - 32px)); overflow-y: auto; }
.ap-sendback__choices { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-sendback__choices > legend { margin-bottom: 8px; padding: 0; }
.ap-sendback__choice { position: relative; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); cursor: pointer; transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.ap-sendback__choice:hover { border-color: var(--ap-stone-300); background: var(--ap-mist); }
.ap-sendback__choice:has(input:checked) { border-color: var(--ap-warm-ink); box-shadow: inset 0 0 0 1px var(--ap-warm-ink); background: var(--ap-paper); }
.ap-sendback__choice input, .ap-sendback__reject input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ap-sendback__choice:has(input:focus-visible), .ap-sendback__reject:has(input:focus-visible) { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-sendback__name { font: 500 15px/1.35 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-sendback__line { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-sendback__reject { position: relative; justify-self: start; margin-top: 4px; }
.ap-sendback__reject span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--ap-danger-border); border-radius: var(--ap-radius-pill); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-danger-700); }
.ap-sendback__reject:hover span, .ap-sendback__reject:has(input:checked) span { background: var(--ap-danger-tint); }
.ap-sendback__part { display: none; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ap-stone-200); }
.ap-sendback__part textarea { min-height: 72px; }
.ap-sendback__part > .ap-field__label { margin: 0 0 -4px; }
.ap-sendback__dna { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-sendback__dna > legend { margin-bottom: 6px; padding: 0; }
.ap-sendback .ap-check input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ap-warm-ink); }
.ap-sendback .ap-modal__actions > button[data-ap-part] { display: none; }
.ap-sendback:has(input[name="choice"][value="fix"]:checked) [data-ap-part="fix"],
.ap-sendback:has(input[name="choice"][value="fresh"]:checked) [data-ap-part="fresh"],
.ap-sendback:has(input[name="choice"][value="pictures"]:checked) [data-ap-part="pictures"],
.ap-sendback:has(input[name="choice"][value="reject"]:checked) [data-ap-part="reject"] { display: flex; }
.ap-sendback:has(input[name="choice"][value="fix"]:checked) .ap-modal__actions > [data-ap-part="fix"],
.ap-sendback:has(input[name="choice"][value="fresh"]:checked) .ap-modal__actions > [data-ap-part="fresh"],
.ap-sendback:has(input[name="choice"][value="pictures"]:checked) .ap-modal__actions > [data-ap-part="pictures"],
.ap-sendback:has(input[name="choice"][value="reject"]:checked) .ap-modal__actions > [data-ap-part="reject"] { display: inline-flex; }
@media (hover: none), (max-width: 1023px) { .ap-sendback__reject span { min-height: 44px; } }
@media (forced-colors: active) { .ap-sendback__choice:has(input:checked) { border: 2px solid Highlight; } }
/* The approve form (spec 4c ruling P5): Other times, then the one filled pill. */
.ap-decision__approve { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; margin-left: auto; }
.ap-decision__approve:has(> details[open]) { flex-basis: 100%; }
.ap-decision__other[open] { display: flex; flex-direction: column; align-items: flex-end; flex-basis: 100%; }
.ap-decision__other[open] > .ap-decision__menu { align-self: flex-end; width: min(100%, 460px); }
.ap-decision__option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ap-decision__option + .ap-decision__option { padding-top: 12px; border-top: 1px solid var(--ap-stone-200); }
.ap-decision__option > .ap-help { margin: 0; }
.ap-decision__when { display: grid; grid-template-columns: auto minmax(0, 160px); align-items: center; gap: 6px 12px; }
.ap-decision__when label { font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-decision__next { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ap-decision__next > .ap-meta { display: inline-flex; align-items: center; gap: 4px; text-align: right; }
/* The next-time line hangs under the button and runs leftward, so it does not
   widen the group and push Other times away from Approve. */
@media (min-width: 768px) {
	.ap-decision__next > .ap-meta { width: 0; min-width: 100%; justify-content: flex-end; white-space: nowrap; }
}
.ap-decision__record { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
/* One filled pill per surface (DESIGN.md): while a form in the bar is open,
   or picture changes wait in the list, the approve pill reads as ghost. */
.ap-decision:has(details[open]) .ap-btn--primary:not(details[open] .ap-btn--primary),
.ap-decision:has(.ap-decision__picture-changes:not([hidden])) .ap-decision__actions .ap-btn--primary { background: transparent; border-color: var(--ap-stone-200); color: var(--ap-stone-700); }
.ap-decision:has(details[open]) .ap-btn--primary:not(details[open] .ap-btn--primary):hover,
.ap-decision:has(.ap-decision__picture-changes:not([hidden])) .ap-decision__actions .ap-btn--primary:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
/* Picture changes waiting to be sent (the picture dialog): a parchment panel of rows. */
.ap-decision__picture-changes { margin: 0; padding: 12px 16px 16px; max-width: none; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); gap: 10px; }
.ap-decision__picture-changes[hidden] { display: none; }
.ap-picture-changes__title { margin: 0; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-picture-changes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-picture-changes li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-picture-changes li + li { border-top: 1px solid var(--ap-stone-200); }
.ap-picture-changes__thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--ap-mist); }
.ap-picture-changes__text { display: flex; flex-direction: column; min-width: 0; }
.ap-picture-changes__text > span:last-child { font-size: 13px; line-height: 18px; color: var(--ap-stone-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-picture-changes .ap-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ap-decision__picture-changes > .ap-help { margin: 0; }
.ap-decision__picture-changes > .ap-btn { align-self: flex-start; }
/* The bar is sticky at the foot of the article and stops at 45% of the
   window, scrolling inside itself; app.js brings an opened form into view. */
.ap-proof-col .ap-decision { box-sizing: border-box; max-height: 45vh; max-height: 45dvh; overflow-y: auto; overscroll-behavior: contain; }
/* The handle that folds the bar away to read the article (app.js): inside
   the bar's top-right corner, never over the article's text. Folded, the bar
   is a 44px paper strip that holds it. */
.ap-decision__toggle { display: none; }
.ap-decision[hidden] { display: none; }
.ap-proof-col .ap-decision__toggle:not([hidden]) { position: absolute; top: 12px; right: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px 0 8px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-700); white-space: nowrap; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ap-proof-col .ap-decision__toggle:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-decision__toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-decision__toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
/* Room for the Hide handle on the bar's first line only, so the actions row keeps the full width. */
.ap-proof-col > .brxe-authorpilot-decision-bar:has(> .ap-decision:not([hidden])) .ap-decision > :first-child { padding-right: 96px; }
.ap-proof-col > .brxe-authorpilot-decision-bar:has(> .ap-decision[hidden]) { min-height: 52px; }
.ap-proof-col > .brxe-authorpilot-decision-bar:has(> .ap-decision[hidden])::before { content: ""; position: absolute; inset: 0 -56px; border-top: 1px solid var(--ap-stone-200); background: var(--ap-paper); }
/* An open form's own submit stays at the foot of the bar while the form is in
   view, so its filled pill is never scrolled out of sight. */
.ap-proof-col .ap-decision details[open] .ap-decision__form > .ap-btn[type="submit"] { position: sticky; bottom: 0; align-self: flex-start; box-shadow: 0 0 0 8px var(--ap-parchment); }
.ap-proof-col .ap-decision details[open] .ap-decision__form > .ap-btn--danger[type="submit"] { background: var(--ap-paper); }
.ap-proof-col .ap-decision details[open] .ap-decision__form > .ap-btn[type="submit"]:disabled { opacity: 1; }
.ap-proof-col .ap-decision details[open] .ap-decision__form > .ap-btn--primary[type="submit"]:disabled { background: color-mix(in srgb, var(--ap-warm-ink) 50%, var(--ap-paper)); }
.ap-proof-col .ap-decision details[open] .ap-decision__form > .ap-btn--danger[type="submit"]:disabled { color: color-mix(in srgb, var(--ap-danger-700) 50%, var(--ap-paper)); border-color: color-mix(in srgb, var(--ap-danger-border) 50%, var(--ap-paper)); }

/* Review page (the shell with an evidence column), Review polish 2026-10-15:
   DESIGN.md's 32px gutters, so the article gets its width. */
.ap-app:has(> .ap-evidence-col) .ap-proof-col { padding: 40px 32px 0; }
.ap-app:has(> .ap-evidence-col) .ap-decision { --ap-bar-gutter: 32px; }
.ap-app:has(> .ap-evidence-col) .ap-proof-col > .brxe-authorpilot-decision-bar:has(> .ap-decision[hidden])::before { inset: 0 -32px; }
html:has(.ap-proof-col .ap-decision) { scroll-padding-bottom: 40vh; }
.ap-proof__note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-proof__note svg { flex-shrink: 0; margin-top: 2px; }
.ap-proof__note a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-proof__later a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
/* How it appears in search (funnel plan 3, FN12): a parchment slip between the notes under the title and the body. The heading in the caption role; each row a 12px stone-600 label over the value in Inter 14px warm-ink with its count as a 12px tabular suffix (warn-700 and "too long" over the cap); the whole address in 13px stone-600; the reason line is the Reason / provenance component. Tokens only. */
.ap-search-slip { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); }
.ap-search-slip__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-search-slip__heading { margin: 0; font: 400 12px/1.3 var(--ap-font-sans); letter-spacing: 0.96px; color: var(--ap-stone-600); }
.ap-search-slip__stage { margin-right: auto; }
.ap-search-slip__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ap-search-slip__row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-search-slip__row dt { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-search-slip__row dd { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-search-slip__value--unset { color: var(--ap-stone-600); }
.ap-search-slip__count { margin-left: 4px; font: 400 12px/16px var(--ap-font-sans); font-variant-numeric: tabular-nums; color: var(--ap-stone-600); white-space: nowrap; }
.ap-search-slip__count--over { color: var(--ap-warn-700); }
.ap-search-slip__address { margin: 2px 0 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); overflow-wrap: anywhere; }
.ap-proof__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ap-proof__evidence { display: none; height: 32px; padding: 0 12px; font-size: 13px; }
.ap-proof__count { margin-left: 2px; padding: 0 6px; border-radius: var(--ap-radius-pill); background: var(--ap-mist); font: 500 12px/18px var(--ap-font-sans); font-variant-numeric: tabular-nums; color: var(--ap-stone-700); }
.ap-proof__count--warn { background: var(--ap-warn-tint); box-shadow: inset 0 0 0 1px var(--ap-warn-border); color: var(--ap-warn-700); }
.ap-queue__waiting { display: inline-flex; align-items: center; height: 20px; }
/* Evidence: the claims that need a look first, the verified ones folded under one line. */
.ap-evidence__verified > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 500 14px/20px var(--ap-font-sans); color: var(--ap-ok-700); list-style: none; cursor: pointer; transition: background-color 150ms ease-out; }
.ap-evidence__verified > summary::-webkit-details-marker { display: none; }
.ap-evidence__verified > summary:hover { background: var(--ap-ok-tint); }
.ap-evidence__verified > summary > span { flex: 1; }
.ap-evidence__verified > summary > svg:last-child { color: var(--ap-stone-500); transition: transform 150ms ease-out; }
.ap-evidence__verified[open] > summary > svg:last-child { transform: rotate(180deg); }
.ap-evidence__verified[open] > .ap-evidence__list { margin-top: 10px; }
.ap-evidence__list + .ap-evidence__verified { margin-top: 10px; }
/* The Evidence drawer (app.js adds .ap-evidence-drawer): from 1024px to
   1599px, and in Wide view, evidence is not a column but a panel from the
   right that the Evidence button opens; Escape and its close button shut it. */
.ap-evidence__close { display: none; }
@media (min-width: 1024px) {
	.ap-app.ap-evidence-drawer.ap-app--wide .ap-proof__evidence { display: inline-flex; }
	.ap-app.ap-evidence-drawer.ap-app--wide > .ap-evidence-col { display: flex; }
	.ap-app.ap-evidence-drawer.ap-app--wide > .ap-evidence-col { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(400px, 100vw); overflow-y: auto; overscroll-behavior: contain; padding-top: 64px; border-left: 1px solid var(--ap-stone-200); border-top: 0; background: var(--ap-parchment); transform: translateX(100%); visibility: hidden; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms; }
	.ap-app.ap-evidence-drawer.ap-app--evidence-open > .ap-evidence-col { transform: none; visibility: visible; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
	.ap-app.ap-evidence-drawer.ap-app--wide > .ap-evidence-col .ap-evidence__close { display: inline-flex; position: absolute; top: 16px; right: 16px; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
	.ap-app.ap-evidence-drawer:not(.ap-app--wide) { grid-template-columns: 248px 320px minmax(0, 1fr); }
	.ap-app.ap-evidence-drawer .ap-proof__evidence { display: inline-flex; }
	.ap-app.ap-evidence-drawer > .ap-evidence-col { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(400px, 100vw); overflow-y: auto; overscroll-behavior: contain; padding-top: 64px; border-left: 1px solid var(--ap-stone-200); border-top: 0; background: var(--ap-parchment); transform: translateX(100%); visibility: hidden; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms; }
	.ap-app.ap-evidence-drawer > .ap-evidence-col .ap-evidence__close { display: inline-flex; position: absolute; top: 16px; right: 16px; }
}
/* No slide until app.js marks the drawer ready, once it has settled closed. */
.ap-app.ap-evidence-drawer:not(.ap-evidence-drawer--ready) > .ap-evidence-col { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.ap-app.ap-evidence-drawer > .ap-evidence-col { transition: none; }
}

/* Callouts and flash */
.ap-callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-callout--warn { border-color: var(--ap-warn-border); background: var(--ap-warn-tint); color: var(--ap-warn-700); }
.ap-callout--danger { border-color: var(--ap-danger-border); background: var(--ap-danger-tint); color: var(--ap-danger-700); }
.ap-callout--ok { border-color: var(--ap-ok-border); background: var(--ap-ok-tint); color: var(--ap-ok-700); }
/* Neutral in the status set: mist with no border line (the bare callout, mist on stone-300, is Held). */
.ap-callout--neutral { border-color: var(--ap-mist); }
.ap-flash a { color: inherit; text-decoration: underline 1px currentColor; text-underline-offset: 2px; }
.ap-form > .ap-callout a { color: inherit; text-decoration: underline 1px currentColor; text-underline-offset: 2px; }
.ap-flash:focus { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }

/* Evidence */
.ap-evidence__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-evidence__card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/20px var(--ap-font-sans); }
/* A badge keeps its own width in the column card (DESIGN.md Status badge is a pill, not a bar) */
.ap-evidence__card > .ap-badge { align-self: flex-start; }
.ap-evidence__source { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-evidence__empty { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
/* QA notes (spec "Hub next steps" §7): the candidate's unwaived warnings,
   above Evidence in the rail's card language. Both sections are block
   children of the rail's element root, which has no column gap, so the
   section carries its own space below the hairline. */
.ap-qa-notes { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--ap-stone-200); }
/* A note's guidance and its actions (2026-10-15): Show me, Ask for a fix,
   Keep as is. The status line is the live region Show me speaks through;
   it stays in the card while empty, so it takes back the column's gap. */
.ap-qa-note__guide { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-qa-note__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-qa-note__actions .ap-btn[disabled] { cursor: default; opacity: 0.6; }
.ap-qa-note__status:empty { margin-top: -8px; }
/* What Show me found in the article: the words (CSS Custom Highlight API),
   and the block they sit in, briefly, for a browser without it. */
::highlight(ap-qa-find) { background-color: var(--ap-warn-border); color: var(--ap-warm-ink); }
::highlight(ap-qa-current) { background-color: var(--ap-warn-700); color: var(--ap-paper); }
.ap-proof .ap-qa-found { scroll-margin-top: 96px; scroll-margin-bottom: 96px; }
.ap-proof .ap-qa-found--flash { background: var(--ap-warn-tint); box-shadow: 0 0 0 6px var(--ap-warn-tint); border-radius: 2px; transition: background-color 600ms ease-out, box-shadow 600ms ease-out; }

/* Empty and error states */
.ap-empty { margin: auto; max-width: 420px; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ap-empty p { margin: 0; font: 400 15px/22px var(--ap-font-sans); color: var(--ap-stone-600); }

/* Builder placeholder (no AppRequest) */
.ap-placeholder { padding: 12px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-600); }

/* Articles page: sidebar 248 · list 360 · pane fluid (no evidence column) */
.ap-app.ap-app--articles { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-articles__head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ap-articles__site, .ap-queue__purpose { padding: 0 8px; }
.ap-article { display: flex; flex-direction: column; gap: 16px; max-width: var(--ap-page-narrow); padding-bottom: 40px; }
.ap-article__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-article__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-article__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.ap-article__actions form { margin: 0; }
.ap-article > .ap-badge { align-self: flex-start; }
.ap-article__decision { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
/* An inline link in the line (the running tray's Refresh) is underlined, not told apart by colour alone (DESIGN.md Text Link) */
.ap-article__decision a { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-article__revisions { display: flex; flex-direction: column; gap: 8px; }
.ap-article__revisions .ap-setup-list__name a, .ap-article__revisions .ap-meta a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-article__more-revisions > summary { list-style: none; cursor: pointer; padding: 8px 0; color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-article__more-revisions > summary::-webkit-details-marker { display: none; }
.ap-article__more-revisions[open] > summary { margin-bottom: 4px; }
/* The stop callout (spec "Hub next steps" §4.4, DESIGN.md Callout and
   status set, ruling NR6): what happened, QA's numbered problems on a
   paper inset, then the next step. The tint, border and icon carry the
   status; the title stays warm-ink. */
.ap-stop { --ap-stop-line: var(--ap-stone-300); display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border: 1px solid var(--ap-stop-line); border-radius: var(--ap-radius); background: var(--ap-mist); font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-stop--needs { --ap-stop-line: var(--ap-ember-border); background: var(--ap-ember-tint); }
.ap-stop--caution { --ap-stop-line: var(--ap-warn-border); background: var(--ap-warn-tint); }
.ap-stop--blocked { --ap-stop-line: var(--ap-danger-border); background: var(--ap-danger-tint); }
.ap-stop__head { display: flex; align-items: flex-start; gap: 8px; }
/* The glyph by tone (ruling R5-2, authorpilot_stop_icon()): a 16px box
   centred on the title's first line holds the Ember dot (Needs you, 8px:
   the badge's 6px dot at callout scale), the pause icon (Held, stone-700)
   or the alert icon (Caution, Blocked). */
.ap-stop__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--ap-stone-700); }
.ap-stop__icon svg { width: 16px; height: 16px; }
.ap-stop__icon .ap-dot { width: 8px; height: 8px; }
.ap-stop--caution .ap-stop__icon { color: var(--ap-warn-700); }
.ap-stop--blocked .ap-stop__icon { color: var(--ap-danger-700); }
.ap-stop__title { margin: 0; font: 600 15px/22px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; text-wrap: balance; }
.ap-stop__lead { margin: 0; padding-left: 24px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-stop__lead, .ap-stop__problem-text, .ap-stop__note, .ap-stop__who { text-wrap: pretty; }
.ap-stop__problems { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-stop__problem { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
.ap-stop__problem + .ap-stop__problem { border-top: 1px solid var(--ap-stone-200); }
.ap-stop__problem-no, .ap-proof__mark-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--ap-radius-pill); background: var(--ap-danger-tint); font: 600 11px/1 var(--ap-font-sans); font-variant-numeric: tabular-nums; color: var(--ap-danger-700); }
.ap-stop__problem-text { margin: 0; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-stop__problem-meta { margin: 2px 0 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-stop__problem-meta a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; white-space: nowrap; transition: text-decoration-color 150ms ease-out; }
.ap-stop__problem-meta a:hover { text-decoration-color: var(--ap-warm-ink); }
/* "· Show in the draft" wraps as one piece, so the dot never ends a line. */
.ap-stop__problem-jump { white-space: nowrap; }
.ap-stop__next { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ap-stop-line); }
.ap-stop__note { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-stop__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-stop__actions form { margin: 0; }
.ap-stop .ap-btn--ghost { background: var(--ap-paper); }
.ap-stop .ap-btn--ghost:hover { background: var(--ap-mist); }
/* On Held's mist a mist hover would vanish: the pill stays paper, and its hairline and words darken. */
.ap-stop--held .ap-btn--ghost:hover { background: var(--ap-paper); border-color: var(--ap-stone-400); color: var(--ap-warm-ink); }
.ap-stop__who { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-stop__who svg { flex-shrink: 0; margin-top: 2px; color: var(--ap-stone-600); }
/* The draft page (spec "Hub next steps" §6): the revision QA stopped on a
   paper sheet in the reading role; a flagged block carries a proof-reader's
   margin mark: a danger rule set into the gutter, the problem's number and
   its sentence above the block. */
.ap-draft { display: flex; flex-direction: column; gap: 20px; max-width: 72ch; padding-bottom: 40px; }
.ap-draft__sheet { padding: 32px 40px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
/* The right padding, given back by the negative margin, keeps the block's
   measure and holds the text off the :target tint's edge. */
.ap-proof__flag { margin: 0 -12px 14px -18px; padding: 8px 12px 2px 16px; border-left: 2px solid var(--ap-danger-700); scroll-margin-top: 24px; }
.ap-proof__flag:target { background: var(--ap-danger-tint); border-radius: 0 var(--ap-radius) var(--ap-radius) 0; }
/* On the tint, the number's Blocked-tint circle would vanish: it turns paper. */
.ap-proof__flag:target .ap-proof__mark-no { background: var(--ap-paper); }
/* The block keeps no top margin under its marks; a flagged heading's
   section break moves above the flag. */
.ap-proof .ap-proof__flag > :not(.ap-proof__mark) { margin-top: 0; }
.ap-proof__flag:has(> :is(h2, h3, h4)) { margin-top: 28px; }
.ap-proof__flag > :last-child { margin-bottom: 0; }
/* .ap-proof p would otherwise win the margin. */
.ap-proof .ap-proof__mark { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font: 500 13px/20px var(--ap-font-sans); color: var(--ap-danger-700); }
@media (max-width: 767px) {
	.ap-draft__sheet { padding: 20px; }
	.ap-proof__flag { margin-right: -8px; margin-left: -12px; padding-right: 8px; padding-left: 10px; }
}

/* Setup page (hub screens 3): sidebar 248 · checklist 360 · pane fluid */
.ap-app.ap-app--setup { grid-template-columns: 248px 360px minmax(0, 1fr); }
/* The column blocks keep Bricks' align-items: flex-start, which shrink-wraps
   the element roots to their content; the checklist and pane span their column. */
.ap-queue-col > .brxe-authorpilot-setup-checklist, .ap-proof-col > .brxe-authorpilot-setup-pane { align-self: stretch; }
/* D55: the Articles roots stretch too, so the not-ready notice spans the pane. */
.ap-queue-col > .brxe-authorpilot-article-list, .ap-proof-col > .brxe-authorpilot-article-pane { align-self: stretch; }
.ap-setup__site { padding: 0 8px; }
.ap-setup .ap-queue__row { gap: 4px; }
.ap-setup-pane { display: flex; flex-direction: column; gap: 20px; max-width: var(--ap-page-narrow); padding-bottom: 40px; }
.ap-setup-pane__status { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-setup-pane form > .ap-btn, .ap-setup-pane > .ap-btn { align-self: flex-start; }
.ap-setup-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; }
.ap-setup-group > legend { margin-bottom: 4px; font: 600 14px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-setup-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
/* A read-only note is one quiet line with a lock, never a slab. */
.ap-readonly { display: flex; align-items: center; gap: 6px; }
.ap-readonly svg { flex: none; color: var(--ap-stone-500); }
.ap-setup-card form { margin: 0; }
.ap-setup-card__title { margin: 0; font: 600 14px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-setup-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font: 400 14px/20px var(--ap-font-sans); }
.ap-setup-dl dt { color: var(--ap-stone-600); }
.ap-setup-dl dd { margin: 0; color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* A question is a sentence, not a label: stack it over its answer, or max-content gives the question the whole row and the answer one letter per line. */
.ap-questions__answers { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.ap-questions__answers dd { margin-bottom: 12px; }
.ap-setup-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-stone-200); }
.ap-setup-list > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-setup-list > li form { margin: 0; }
.ap-setup-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* A voice preview: topic and meta on top, the text below at reading width. */
.ap-setup-list > li.ap-preview { flex-direction: column; align-items: stretch; gap: 10px; }
.ap-preview__text { max-width: 68ch; font: 400 15px/24px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-preview__text p { margin: 0 0 12px; }
.ap-preview__text p:last-child { margin-bottom: 0; }
.ap-setup-list__name { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-connect__parts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.ap-connect__part { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-connect__part p { margin: 0; }
.ap-connect__part-title { margin: 0; font: 600 14px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-connect__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ap-connect__checksum code { overflow-wrap: anywhere; }
/* Plan 2b: the platform choice shows only the chosen platform's part; without :has() both show. */
.ap-connect__platform { margin: 0 0 8px; }
.ap-connect__ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 16px; }
.ap-connect__ask .ap-help { margin: 0; }
.ap-connect__store { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-connect__store p { margin: 0; }
.ap-connect:has(input[name="ap_platform"][value="shopify"]:checked) [data-ap-platform="wordpress"],
.ap-connect:has(input[name="ap_platform"][value="wordpress"]:checked) [data-ap-platform="shopify"] { display: none; }
/* Destination's next step once a connection works: the hairline card with the Note slip's warm-ink rule (DESIGN.md → Funnel, Note slip). */
/* The page's next step is its one lifted, warm card (DESIGN.md → Emphasis). */
.ap-next-step { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--ap-cream); border: 1px solid var(--ap-cream-border); border-radius: var(--ap-radius-raised); box-shadow: var(--ap-shadow-lift); }
.ap-next-step p { margin: 0; }
.ap-next-step__done { display: flex; align-items: center; gap: 6px; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-ok-800); } /* ok-800: 5.3:1 on cream */
.ap-next-step__title { margin: 0; font: 600 16px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-next-step__why { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); max-width: 68ch; }
.ap-next-step .ap-btn { margin-top: 6px; }
/* A Shopify store's part of its Destination card (Choose the blog, Publishing on the store). */
.ap-store { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--ap-stone-200); }
.ap-store__title { margin: 0; font: 600 14px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-store p { margin: 0; }
.ap-store__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* The Destination step (spec 5d §8.2): per channel, the connection card,
   the checklist (or the run's progress), what was made and the request.
   Every <details> works without JS; its summary carries the button class. */
/* Destination layout: auto-review on top, "Live site" above "Test copies",
   then "For the whole Site". Each channel is a paper card that folds on its handle (native
   details); a test copy's card has a dashed edge, the hub's mark for "not
   the real thing". Inside, the checklist tiers and the publishing panels
   fold on a hairline row each. Chevrons as the nav's. */
.ap-destinations { display: flex; flex-direction: column; gap: 40px; }
.ap-channel-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ap-channel-group__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.ap-channel-group__head .ap-meta { margin: 0; }
.ap-channel-group__title { margin: 0; font: 600 20px/26px var(--ap-font-serif); letter-spacing: -0.2px; color: var(--ap-warm-ink); text-wrap: balance; }
.ap-channel-group--site { gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ap-stone-200); }
.ap-channel-group--review { gap: 12px; margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-channel { min-width: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); background: var(--ap-paper); }
.ap-channel-group--test .ap-channel { border-style: dashed; border-color: var(--ap-stone-300); }
.ap-channel__head { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--ap-radius-raised); cursor: pointer; transition: background-color 120ms ease-out; }
.ap-channel__head::-webkit-details-marker, .ap-fold__head::-webkit-details-marker { display: none; }
.ap-channel__head:hover { background: var(--ap-parchment); }
.ap-channel[open] > .ap-channel__head { border-bottom: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised) var(--ap-radius-raised) 0 0; }
.ap-channel-group--test .ap-channel[open] > .ap-channel__head { border-bottom-style: dashed; border-bottom-color: var(--ap-stone-300); }
.ap-channel__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-channel__who .ap-meta { overflow-wrap: anywhere; }
.ap-channel__badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ap-channel__name { margin: 0; font: 600 16px/22px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-channel__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ap-fold__chev { display: inline-flex; flex-shrink: 0; color: var(--ap-stone-500); transition: transform 120ms ease-out, color 120ms ease-out; }
.ap-channel[open] > summary .ap-fold__chev, .ap-fold[open] > summary .ap-fold__chev { transform: rotate(180deg); }
.ap-channel__head:hover .ap-fold__chev, .ap-channel__head:focus-visible .ap-fold__chev, .ap-fold__head:hover .ap-fold__chev, .ap-fold__head:focus-visible .ap-fold__chev { color: var(--ap-warm-ink); }
.ap-fold { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--ap-stone-200); }
.ap-fold__head { list-style: none; display: flex; align-items: center; gap: 12px; padding: 2px 0; border-radius: var(--ap-radius); cursor: pointer; }
.ap-fold__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; }
.ap-fold__name { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-fold > .ap-help, .ap-fold > .ap-heading-help { margin: 0 0 2px; }
.ap-destination__unchecked { margin: 0; padding: 12px 14px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-destination__made-title { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
@media (prefers-reduced-motion: reduce) {
	.ap-fold__chev, .ap-channel__head { transition: none; }
}
.ap-destination { display: flex; flex-direction: column; gap: 12px; }
.ap-destination__head { display: flex; align-items: flex-start; gap: 12px; }
.ap-destination__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-destination__platform { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-destination__host, .ap-destination__link { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; overflow-wrap: anywhere; transition: color 150ms ease-out; }
.ap-destination__host:hover, .ap-destination__link:hover { color: var(--ap-warm-ink); }
.ap-destination__check { margin: 0; }
/* The card's Check again row (SD6): the ghost pill, then what it does and how the last run went, one quiet line each; a stopped read is a warn-ink line with its glyph, never Ember. */
.ap-destination__checkrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--ap-stone-200); }
.ap-destination__check-line { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-destination__check-line time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-destination__stopped { display: flex; align-items: flex-start; gap: 6px; color: var(--ap-warn-700); }
.ap-destination__stopped svg { flex-shrink: 0; margin-top: 2px; }
/* What AuthorFox found (SD7): a hairline list of pages; a page without text says so in warn ink beside its glyph. */
.ap-found { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ap-stone-200); }
.ap-found__title { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-found__line, .ap-found__note, .ap-found__more { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-found__line time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-found__more a, .ap-found__note a { color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; transition: color 150ms ease-out; }
.ap-found__more a:hover, .ap-found__note a:hover { color: var(--ap-warm-ink); }
.ap-found__pages { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-found__page { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 6px 12px; }
.ap-found__page + .ap-found__page { border-top: 1px solid var(--ap-stone-200); }
/* A page title is a link to the page: the card's link convention, a stone-300 hairline underline that takes the ink on hover and focus. */
.ap-found__name { min-width: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; overflow-wrap: anywhere; transition: text-decoration-color 150ms ease-out; }
.ap-found__name:hover, .ap-found__name:focus-visible { text-decoration-color: currentColor; }
.ap-found__size { font: 400 13px/18px var(--ap-font-sans); font-variant-numeric: tabular-nums; color: var(--ap-stone-600); white-space: nowrap; }
.ap-found__empty { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warn-700); white-space: nowrap; }
.ap-found__empty svg { flex-shrink: 0; }
@media (max-width: 599px) { .ap-found__page { flex-wrap: wrap; } }
/* The card's actions (spec 2026-10-14 connection manage, CM15): Check again, Change and Remove in one left-aligned row that wraps; an opened <details> starts its own line and its panel takes the card's full width. */
.ap-destination__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ap-destination__actions > details[open] { flex-basis: 100%; }
.ap-destination__checklist, .ap-destination__made, .ap-destination__progress { display: flex; flex-direction: column; gap: 12px; }
.ap-destination__request-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-destination__request-body p { margin: 0; }
.ap-destination__request-body form { margin: 0; }
.ap-destination__note { color: var(--ap-stone-700); }
.ap-destination__ask > summary { list-style: none; cursor: pointer; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-destination__ask > summary::-webkit-details-marker { display: none; }
.ap-destination__ask[open] > summary { margin-bottom: 12px; }
/* Reconnect (5d-2 Task 5): the summary is the button; open, the help and one field. */
.ap-destination__reconnect > summary, .ap-pause > summary { width: fit-content; }
.ap-destination__reconnect[open] > summary, .ap-pause[open] > summary { margin-bottom: 12px; }
.ap-destination__reconnect > .ap-help { margin: 0 0 12px; }
.ap-destination__reconnect > .ap-form, .ap-pause > .ap-form { max-width: 480px; }
/* Part B spec §5.3: the publishing state's lines (since, why, what waits) under one icon. */
.ap-publishing__state > svg { flex-shrink: 0; margin-top: 3px; }
.ap-publishing__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-publishing__lines p { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.ap-publishing__lines time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-link { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; cursor: pointer; transition: color 150ms ease-out; }
.ap-link:hover, :hover > .ap-link { color: var(--ap-warm-ink); }
summary.ap-link, summary.ap-btn { list-style: none; }
summary.ap-link::-webkit-details-marker, summary.ap-btn::-webkit-details-marker { display: none; }
.ap-btn--small { height: 32px; padding: 0 12px; }
.ap-readiness__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ap-setup-list > li.ap-readiness__row { display: grid; align-items: start; }
.ap-readiness__state { min-width: 104px; padding-top: 1px; } /* the widest state word, so every name starts on one line */
.ap-readiness__actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; max-width: 100%; }
.ap-readiness__actions > .ap-meta { align-self: center; }
.ap-readiness__guide, .ap-readiness__details { margin-top: 6px; }
.ap-readiness__guide > summary, .ap-readiness__details > summary { width: fit-content; }
.ap-readiness__guide ol { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 18px; padding: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-readiness__details code { display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: var(--ap-radius); background: var(--ap-mist); font: 400 13px/18px var(--ap-font-mono); color: var(--ap-stone-700); }
.ap-readiness__picture { margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ap-readiness__picture img { display: block; width: 100%; max-width: 320px; height: auto; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
/* The open setup or request form takes the row's full width under it. */
.ap-readiness__setup[open], .ap-readiness__request[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ap-modal-inline { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); background: var(--ap-paper); text-align: left; }
.ap-modal-inline__title { margin: 0; font: 600 22px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-modal-inline__parts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 0 18px; padding: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-modal-inline .ap-form__actions { justify-content: flex-end; }
.ap-destination__ask .ap-modal-inline { max-width: 640px; }
@media (max-width: 480px) {
	.ap-readiness__row { grid-template-columns: auto minmax(0, 1fr); }
	.ap-readiness__actions { grid-column: 1 / -1; justify-content: flex-start; }
	.ap-readiness__setup[open], .ap-readiness__request[open] { align-items: stretch; }
	.ap-destination__head { flex-wrap: wrap; }
	.ap-destination__who { flex-basis: 100%; }
	.ap-channel__head { padding: 12px 14px; }
	.ap-channel__badges { flex-direction: column; align-items: flex-end; }
	.ap-channel__body { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-destination__host, .ap-destination__link, .ap-link, .ap-found__more a, .ap-found__note a, .ap-found__name { transition: none; }
}
.ap-choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ap-choice input { margin-top: 3px; accent-color: var(--ap-warm-ink); }
.ap-choice__text { display: flex; flex-direction: column; gap: 2px; color: var(--ap-warm-ink); }
.ap-input--amount { max-width: 200px; font-variant-numeric: tabular-nums; }

/* Knowledge page (3.5a-1): sidebar 248 · list 360 · pane fluid. The list and
   pane roots span their columns (Bricks' .brxe-block shrink-wraps element
   roots, as on the setup page), and the seven kind tabs wrap inside the list. */
.ap-app.ap-app--knowledge { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-knowledge-list, .ap-proof-col > .brxe-authorpilot-knowledge-pane { align-self: stretch; }
.ap-tabs--wrap { flex-wrap: wrap; row-gap: 4px; }

/* Run progress (DESIGN.md): one glyph per state; app.js only swaps is-{state} */
/* The writing steps' "?" (spec 2026-10-08 H06), right-aligned above the list; empty without JS. */
.ap-steps__help { display: flex; justify-content: flex-end; margin: 0; }
.ap-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-steps__item { display: flex; align-items: center; gap: 10px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-steps__item.is-current { color: var(--ap-warm-ink); font-weight: 500; }
.ap-steps__item.is-stopped { color: var(--ap-danger-700); font-weight: 500; }
.ap-steps__glyph { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; }
.ap-steps__glyph svg { width: 16px; height: 16px; }
.ap-g { display: none; }
.is-done .ap-g--done, .is-stopped .ap-g--stopped, .is-current .ap-g--current, .is-todo .ap-g--todo { display: inline-flex; }
.is-done .ap-steps__glyph { color: var(--ap-ok-700); }
.ap-steps__todo { width: 10px; height: 10px; border: 1.5px solid var(--ap-stone-300); border-radius: var(--ap-radius-pill); }
.ap-steps__pulse { width: 10px; height: 10px; border-radius: var(--ap-radius-pill); background: var(--ap-warm-ink); animation: ap-pulse 1.6s ease-in-out infinite; }
.ap-steps__time { margin-left: auto; font: 400 12px/1 var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
@keyframes ap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Working (DESIGN.md Components → Working): a page waiting for work in the
   background. includes/working.php writes it; app.js counts the clock and
   swaps the line. The sweep is a hairline along the foot, not a spinner. */
.ap-working { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-working__pulse { flex-shrink: 0; width: 10px; height: 10px; margin-top: 5px; border-radius: var(--ap-radius-pill); background: var(--ap-warm-ink); animation: ap-pulse 1.2s ease-in-out infinite; }
.ap-working__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-working__status { display: flex; flex-direction: column; gap: 4px; }
.ap-working__title { margin: 0; font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-working__line { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-working__progress { margin: 2px 0 0; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-working__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-working__time { font-variant-numeric: tabular-nums; }
.ap-working__meta a { color: var(--ap-warm-ink); }
.ap-working__sweep { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ap-mist); }
.ap-working__sweep::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--ap-warm-ink); animation: ap-sweep 1.8s var(--ap-ease) infinite; }
@keyframes ap-sweep { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.ap-working.is-stopped .ap-working__pulse { animation: none; background: var(--ap-stone-400); }
.ap-working.is-stopped .ap-working__sweep { display: none; }

/* Request form (DESIGN.md Form field) */
.ap-request { display: flex; flex-direction: column; gap: 24px; max-width: var(--ap-page-narrow); padding-bottom: 40px; }
.ap-request > .ap-btn { align-self: flex-start; }
.ap-request__head { display: flex; flex-direction: column; gap: 8px; }
.ap-request__intro { margin: 0; max-width: 60ch; font: 400 15px/22px var(--ap-font-sans); color: var(--ap-stone-600); text-wrap: pretty; }
/* The request form's own rhythm: notes rows line up, the date's placeholder reads as one, Advanced and the actions sit under hairlines. */
.ap-request .ap-form { gap: 24px; }
.ap-request .ap-note { align-items: start; }
/* One line that grows with what is typed, as tall as the date beside it; a browser without field-sizing keeps a resizable box. */
.ap-request .ap-note .ap-input { box-sizing: border-box; min-height: 42px; }
.ap-request .ap-note textarea.ap-input { max-height: 240px; padding-block: 10px; field-sizing: content; }
.ap-request .ap-note input[type="date"][data-ap-empty]::-webkit-datetime-edit { color: var(--ap-stone-500); }
.ap-request .ap-note input[type="date"][data-ap-empty]:not(:focus) { color: var(--ap-stone-500); }
.ap-request .ap-advanced { padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-request .ap-advanced > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; border-radius: 4px; }
.ap-request .ap-advanced > summary::-webkit-details-marker { display: none; }
.ap-request .ap-advanced > summary svg { width: 16px; height: 16px; color: var(--ap-stone-500); transform: rotate(-90deg); transition: transform 150ms var(--ap-ease); }
.ap-request .ap-advanced[open] > summary svg { transform: none; }
.ap-request .ap-advanced > summary:hover { color: var(--ap-warm-ink); }
.ap-request .ap-advanced[open] > summary { margin-bottom: 16px; }
.ap-request .ap-form__actions { padding-top: 20px; border-top: 1px solid var(--ap-stone-200); }

/* "Not sure what to write?" on a blank New article (NewArticleGuide): a paper card above the form. */
.ap-new-guide { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-new-guide__title { margin: 0; font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-new-guide__subtitle { margin: 0; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-new-guide__ideas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ap-new-guide__ideas .ap-help { flex: 1 1 280px; }
.ap-new-guide__ideas .ap-btn { height: 32px; padding: 0 12px; font-size: 13px; flex-shrink: 0; }
.ap-new-guide__funnel { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-new-guide__stages { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.ap-new-guide__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); text-decoration: none; transition: border-color 120ms ease-out; }
.ap-new-guide__stage:hover { border-color: var(--ap-stone-300); }
.ap-new-guide__stage:hover > svg { color: var(--ap-warm-ink); }
.ap-new-guide__stage:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-new-guide__stage.is-needed { border-color: var(--ap-stone-300); }
.ap-new-guide__stage > svg { width: 16px; height: 16px; color: var(--ap-stone-500); transform: rotate(-90deg); }
.ap-new-guide__stage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-new-guide__stage-word { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-new-guide__stage-reader { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); text-wrap: pretty; }
.ap-new-guide__stage-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ap-new-guide__stage-line { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-new-guide__foot { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-new-guide__foot .ap-link { font-size: 13px; }
@media (max-width: 719px) {
	.ap-new-guide__stage { grid-template-columns: minmax(0, 1fr) 16px; }
	.ap-new-guide__stage-meta { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.ap-new-guide__stage > svg { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .ap-request .ap-advanced > summary svg, .ap-new-guide__stage { transition: none; } }
@media (forced-colors: active) { .ap-new-guide__stage { border-color: CanvasText; } }
/* The account page (account overview, 2026-10-28): the page header, then
   one white card per part (Plan and billing, Your details, Sign-in and
   security). A card reads as an overview: label-and-value rows split by
   hairlines, each with its one quiet Change, which opens the form in the
   hub's modal. llq-signin's list takes the hub's tokens. */
.ap-account { gap: 20px; }
.ap-account__cols, .ap-account__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* The account and plan pages share the review page's grid; from 1024px they
   take the whole width beside the sidebar (the list and evidence columns are
   empty there), and from 1280px the account cards sit in two columns. */
@media (min-width: 1024px) {
	.ap-app:has(.ap-account, .ap-plan-page) { grid-template-columns: 248px minmax(0, 1fr); }
	.ap-app:has(.ap-account, .ap-plan-page) > .ap-queue-col, .ap-app:has(.ap-account, .ap-plan-page) > .ap-evidence-col { display: none; }
	.ap-account { max-width: var(--ap-page-wide); }
}
@media (min-width: 1280px) {
	.ap-account__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.ap-account__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-account__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-account__titles .ap-meta { overflow-wrap: anywhere; }
.ap-account .llq-signin { --llq-signin-accent: var(--ap-warm-ink); --llq-signin-on-accent: var(--ap-paper); --llq-signin-radius: var(--ap-radius); --llq-signin-font: var(--ap-font-sans); }
.ap-account__card { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); }
.ap-account__card-head { display: flex; flex-direction: column; gap: 4px; }
.ap-account__heading { margin: 0; font: 600 20px/1.3 var(--ap-font-serif); letter-spacing: -0.2px; color: var(--ap-warm-ink); }
.ap-account__subheading { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
/* Rows: the label (160px), the value, the action; a note or a pending address spans the row under them. */
.ap-account__rows { margin: 0; border-top: 1px solid var(--ap-stone-200); }
.ap-account__row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-account__row dt { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-account__row dd { margin: 0; }
.ap-account__value { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-account__act { justify-self: end; }
.ap-account__note { grid-column: 1 / -1; }
.ap-account__pending { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-account__pending p { margin: 0; flex: 1 1 260px; }
.ap-account__methods { display: flex; flex-direction: column; gap: 10px; }
/* Other ways to sign in: llq-signin's connections list (the plugin's markup)
   drawn as the page's own rows, 2026-10-28. Each way is a row between
   hairlines: its icon, its name in 500 14px ink, its state in 13px stone; the
   passkey offer keeps its title and one line (the two explainer paragraphs
   are left out: "What is a passkey?", "Where is it kept?"), with the name
   field and Add a passkey on one line. Buttons are the hub's ghost pills,
   so the plan's Pick a plan stays the page's one filled pill. The plugin's
   forms ship [hidden] until its script shows them, so no rule here sets a
   display on a hidden one. */
.ap-account .llq-signin__connections { gap: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); border-bottom: 1px solid var(--ap-stone-200); }
.ap-account .llq-signin__connection { gap: 10px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--ap-stone-200); }
.ap-account .llq-signin__connection > svg { width: 16px; height: 16px; color: var(--ap-stone-600); }
.ap-account .llq-signin__connection-label { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-account .llq-signin__connection-status { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); opacity: 1; }
.ap-account .llq-signin__passkey-item, .ap-account .llq-signin__passkey-only, .ap-account .llq-signin__code-box { padding-left: 26px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-account .llq-signin__passkey-name { color: var(--ap-warm-ink); }
.ap-account .llq-signin__code-box { gap: 8px; padding-bottom: 12px; }
.ap-account .llq-signin__code-box .llq-signin__text, .ap-account .llq-signin__passkey-add .llq-signin__text { margin: 0; max-width: 60ch; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-account .llq-signin__passkey-add:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 0; }
.ap-account .llq-signin__passkey-add:has(> .llq-signin__passkey-hero-title) { border-top: 1px solid var(--ap-stone-200); }
.ap-account .llq-signin__passkey-add > :is(.llq-signin__passkey-hero-title, .llq-signin__text, .llq-signin__label) { grid-column: 1 / -1; }
.ap-account .llq-signin__passkey-add > .llq-signin__text:has(> strong) { display: none; }
.ap-account .llq-signin__passkey-hero-title { margin: 0; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-account .llq-signin__passkey-add > .llq-signin__label { margin: 8px 0 0; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-account .llq-signin__input { min-height: 40px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-account .llq-signin__input:focus { border-color: var(--ap-warm-ink); }
.ap-account .llq-signin__button { width: auto; min-height: 36px; padding: 0 16px; gap: 6px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: transparent; font: 500 14px/1 var(--ap-font-sans); color: var(--ap-stone-700); white-space: nowrap; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ap-account .llq-signin__button:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-account .llq-signin__button--small { min-height: 32px; padding: 0 12px; }
.ap-account .llq-signin__button svg { width: 16px; height: 16px; }
.ap-account .llq-signin__code-form { justify-items: start; }
.ap-account .llq-signin__passkey-status:not(:empty) { grid-column: 1 / -1; font-size: 13px; }
@media (max-width: 559px) {
	.ap-account .llq-signin__passkey-add:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
	.ap-account .llq-signin__button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-account .llq-signin__button { transition: none; }
}
/* Plan and billing (billing spec §3.2): per account its name and badge, the plan line, then the buttons in a wrapping row, each with its one-line help under it. */
.ap-account__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-account__plan { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--ap-stone-200); }
.ap-account__plan:last-child { padding-bottom: 0; }
.ap-account__plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ap-account__plan-name { font: 600 16px/22px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-account__line { margin: 0; font: 400 15px/22px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-account__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; margin-top: 8px; }
.ap-account__actions:empty { display: none; }
.ap-account__inline { display: grid; gap: 4px; justify-items: start; max-width: 100%; }
.ap-account__out { margin: 4px 0 0; }
@media (max-width: 559px) {
	.ap-account__card { padding: 16px; }
	.ap-account__row { grid-template-columns: minmax(0, 1fr) auto; }
	.ap-account__row dt { grid-column: 1 / -1; }
}
/* Plan page (billing spec §3.1): a segmented interval toggle and three tier cards; the middle card is the page's one lifted card. */
.ap-plan-page { max-width: var(--ap-page-wide); }
.ap-segment { display: inline-flex; align-self: flex-start; max-width: 100%; padding: 3px; gap: 2px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); }
.ap-segment__item { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--ap-radius-pill); font: 500 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: none; }
.ap-segment__item:hover { color: var(--ap-warm-ink); }
.ap-segment__item[aria-current="true"] { background: var(--ap-warm-ink); color: var(--ap-paper); }
.ap-segment__item[aria-current="true"] .ap-meta { color: inherit; }
.ap-segment__item .ap-meta { margin-left: 6px; }
.ap-plan-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.ap-plan-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
.ap-plan-card--lift { background: var(--ap-cream); border-color: var(--ap-cream-border); border-radius: var(--ap-radius-raised); box-shadow: var(--ap-shadow-lift); }
.ap-plan-card--current { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-plan-card .ap-title--sm { margin: 0; }
.ap-plan-card__price { margin: 0; font: 500 24px/32px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-plan-card__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--ap-stone-700); }
.ap-plan-card form { margin-top: auto; }
@media (max-width: 1023px) {
	.ap-plan-card .ap-btn, .ap-account__actions .ap-btn, .ap-segment__item { min-height: 44px; box-sizing: border-box; }
}
.ap-form { display: flex; flex-direction: column; gap: 20px; }
.ap-field { display: flex; flex-direction: column; gap: 6px; }
.ap-field label, .ap-field__label, .ap-notes legend { font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-field__shown { margin: 0; font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-input { min-height: 40px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); font: 400 14px/1.4 var(--ap-font-sans); color: var(--ap-warm-ink); }
textarea.ap-input { padding: 10px 12px; resize: vertical; }
.ap-input:focus { border-color: var(--ap-warm-ink); }
/* Browser controls carry the design too (craft floor): a select gets the
   system chevron, a file input the ghost pill, a plain summary a chevron
   that turns, and every tick and radio the ink. */
select.ap-input { appearance: none; padding-right: 36px; background: var(--ap-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px; }
select.ap-input[multiple] { padding-right: 12px; background-image: none; }
:where(.ap-app) input[type="file"].ap-input { display: flex; align-items: center; padding: 6px 12px; font-size: 13px; color: var(--ap-stone-700); }
:where(.ap-app) input[type="file"]::file-selector-button { margin-right: 12px; height: 28px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: transparent; font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-700); cursor: pointer; }
:where(.ap-app) input[type="file"]::file-selector-button:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
:where(.ap-app) input[type="checkbox"], :where(.ap-app) input[type="radio"] { accent-color: var(--ap-warm-ink); }
:where(.ap-app) :not(.ap-switcher) > summary:not([class]) { display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
:where(.ap-app) :not(.ap-switcher) > summary:not([class])::-webkit-details-marker { display: none; }
:where(.ap-app) :not(.ap-switcher) > summary:not([class])::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 120ms ease-out; }
:where(.ap-app) :not(.ap-switcher) > details[open] > summary:not([class])::before, :where(.ap-app) details[open]:not(.ap-switcher) > summary:not([class])::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { :where(.ap-app) summary:not([class])::before { transition: none; } }
.ap-field.is-invalid .ap-input { border-color: var(--ap-danger-border); }
.ap-help { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-error { margin: 0; display: flex; align-items: center; gap: 6px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-danger-700); }
.ap-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.ap-error[hidden] { display: none; }
.ap-notes { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-note { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; align-items: start; }
.ap-note[hidden] { display: none; }
.ap-notes__add { align-self: flex-start; }
.ap-advanced > summary { cursor: pointer; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-advanced[open] > summary { margin-bottom: 12px; }
.ap-advanced__fields { display: flex; flex-direction: column; gap: 16px; }
.ap-form__summary { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-form__actions { display: flex; gap: 8px; }

/* Responsive: DESIGN.md Responsive behavior */
@media (max-width: 1279px) {
	.ap-app { grid-template-columns: 248px 320px minmax(0, 1fr); }
	.ap-evidence-col { grid-column: 3; border-top: 1px solid var(--ap-stone-200); background: var(--ap-paper); }
	.ap-app.ap-app--articles { grid-template-columns: 248px 320px minmax(0, 1fr); }
	.ap-app.ap-app--setup { grid-template-columns: 248px 320px minmax(0, 1fr); }
	.ap-app.ap-app--knowledge { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app { grid-template-columns: minmax(0, 1fr); }
	.ap-proof__wide { display: none; }
	.ap-sidebar, .ap-queue-col, .ap-proof-col, .ap-evidence-col { grid-column: 1; border-right: 0; }
	.ap-proof-col { padding: 24px 16px 0; }
	.ap-decision { margin: 0 -16px; padding: 16px; }
	.ap-proof-col > .brxe-authorpilot-decision-bar:has(> .ap-decision[hidden])::before { inset: 0 -16px; }
	.ap-title--lg { font-size: 28px; }
	.ap-app.ap-app--articles { grid-template-columns: minmax(0, 1fr); }
	.ap-article__head { flex-direction: column; }
	.ap-note { grid-template-columns: minmax(0, 1fr); }
	.ap-app.ap-app--setup { grid-template-columns: minmax(0, 1fr); }
	.ap-app.ap-app--knowledge { grid-template-columns: minmax(0, 1fr); }
	.ap-setup-dl { grid-template-columns: minmax(0, 1fr); }
}
/* Phones and small tablets (DESIGN.md App shell, 2026-10-27). Below 1024px
   the sidebar is a 56px top bar on paper, sticky, holding the mark, the
   Site switcher and a Menu button; the nav opens from that button as a
   drawer from the left, 300px wide on parchment with the sidebar's own
   rhythm, over a navy scrim. The drawer is a native popover: Escape, a tap
   on the scrim, its Close button and any navigation close it, and nothing
   here needs app.js. A browser without popovers keeps the stacked sidebar,
   the Menu button never shows, and the page still works (the supports
   block). Targets grow to 44px below 1024px whatever the browser. */
@supports selector(:popover-open) {
	@media (max-width: 1023px) {
		.ap-sidebar { position: sticky; top: 0; z-index: 12; flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; background: var(--ap-paper); border-right: 0; border-bottom: 1px solid var(--ap-stone-200); }
		.ap-sidebar > .brxe-authorpilot-app-mark { flex: none; }
		.ap-sidebar > .brxe-authorpilot-site-switcher { flex: 1 1 auto; min-width: 0; max-width: 300px; }
		.ap-sidebar > .brxe-authorpilot-app-nav { flex: none; display: block; margin-left: auto; }
		.ap-mark { margin: 0; }
		/* On hold: the nav's element stops being a box, so the line becomes a row of the bar's own: after the mark, the switcher and the Menu button (order), full width, edge to edge under them. Only while held, so the ordinary bar is untouched. */
		.ap-sidebar:has(.ap-nav__hold) { flex-wrap: wrap; row-gap: 0; align-content: flex-start; }
		.ap-sidebar:has(.ap-nav__hold) > .brxe-authorpilot-app-nav { display: contents; }
		/* Wrapping must not give the switcher its full text width as a base size, or a long Site name pushes it onto a row of its own: a zero basis keeps it on the bar's first row, ellipsising as before (min-width and max-width stay). */
		.ap-sidebar:has(.ap-nav__hold) > .brxe-authorpilot-site-switcher { flex: 1 1 0; }
		.ap-sidebar:has(.ap-nav__hold) .ap-drawer__open { margin-block: 6px; margin-left: auto; }
		.ap-sidebar:has(.ap-nav__hold) .ap-nav__hold { order: 2; box-sizing: border-box; width: calc(100% + 32px); margin: 0 -16px; padding: 8px 16px; border-width: 1px 0 0; border-radius: 0; }
		.ap-drawer__open, .ap-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-stone-600); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
		.ap-drawer__open { margin-right: -8px; }
		.ap-drawer__open svg, .ap-drawer__close svg { width: 20px; height: 20px; }
		.ap-drawer__open:hover, .ap-drawer__close:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); color: var(--ap-warm-ink); }
		.ap-drawer:not(:popover-open) { display: none; }
		.ap-drawer:popover-open { position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100% - 56px)); height: auto; margin: 0; padding: 0 16px 20px; gap: 20px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--ap-stone-200); background: var(--ap-parchment); box-shadow: var(--ap-shadow-lift); transition: transform 200ms var(--ap-ease), opacity 200ms var(--ap-ease); }
		@starting-style {
			.ap-drawer:popover-open { transform: translateX(-12px); opacity: 0; }
		}
		.ap-drawer::backdrop { background: rgba(2, 22, 56, 0.24); animation: ap-modal-fade 200ms var(--ap-ease); }
		/* The drawer's head: the lockup where the sidebar has it, and Close where the Menu button was, so the thumb stays put. */
		.ap-drawer__head { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: 56px; margin: 0 0 -4px; }
		.ap-drawer__mark { display: block; width: 116px; height: 36px; margin-left: 8px; background: url(../images/authorfox-logo.webp) left center / contain no-repeat; }
		.ap-drawer__close { margin-right: -8px; }
		body:has(.ap-drawer:popover-open) { overflow: hidden; }
	}
	@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
		.ap-drawer:popover-open { transition: none; }
		.ap-drawer::backdrop { animation: none; }
	}
	@media (max-width: 479px) {
		/* Under 480px the lockup gives way to the fox-head icon (DESIGN.md Brand), so the Site's name keeps its room. */
		.ap-mark { width: 36px; background-image: url(../images/authorfox-icon.webp); background-position: center; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.ap-btn { transition: none; }
	.ap-steps__pulse { animation: none; }
	.ap-working__pulse, .ap-working__sweep::after { animation: none; }
	.ap-working__sweep { display: none; }
}

/* Knowledge page tidy (2026-10-22): search, slim grouped rows, the overview, folds. */
.ap-knowledge__proposal { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--ap-ember-tint); border-color: var(--ap-ember-border); }
.ap-knowledge__proposal:hover { background: var(--ap-paper); }
.ap-knowledge__proposal > .ap-queue__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-knowledge__proposal > .ap-badge { flex: none; }
.ap-tray .ap-title { overflow-wrap: anywhere; }
.ap-knowledge__earlier > summary, .ap-knowledge__retired > summary, .ap-tray__decided > summary { font: 500 13px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-knowledge__find { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.ap-knowledge__find-label { font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-knowledge__find-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-knowledge__find-row > input { flex: 1 1 140px; min-width: 0; }
.ap-knowledge__find-row > select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ap-knowledge__find .ap-help { margin: 0; }
.ap-knowledge__list { display: flex; flex-direction: column; gap: 16px; }
.ap-knowledge__group-title { margin: 0 0 4px; padding: 0 12px; font: 500 12px/16px var(--ap-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-stone-600); }
.ap-knowledge__count { font-weight: 400; color: var(--ap-stone-500); font-variant-numeric: tabular-nums; }
.ap-knowledge__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-knowledge__row { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: var(--ap-radius); text-decoration: none; color: var(--ap-warm-ink); font: 400 14px/20px var(--ap-font-sans); }
.ap-knowledge__row:hover { background: var(--ap-paper); border-color: var(--ap-stone-200); }
.ap-knowledge__row[aria-current="page"] { background: var(--ap-paper); border-color: var(--ap-stone-200); font-weight: 500; }
.ap-knowledge__label { flex: 1 1 9em; min-width: 0; overflow-wrap: anywhere; }
.ap-knowledge__kind { flex: none; font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-knowledge__meta { flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ap-knowledge__retired .ap-knowledge__rows { margin-top: 4px; }
.ap-knowledge__none { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.ap-knowledge__list [hidden] { display: none; }
.ap-knowledge-overview { display: flex; flex-direction: column; gap: 20px; }
.ap-knowledge-overview__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.ap-knowledge-overview__tile { padding: 12px 16px; background: var(--ap-paper); border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
.ap-knowledge-overview__tile dt { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-knowledge-overview__tile dd { margin: 4px 0 0; font: 400 28px/32px var(--ap-font-serif); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-knowledge-overview__kinds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-knowledge-overview__kinds li + li { border-top: 1px solid var(--ap-stone-200); }
.ap-knowledge-overview__kinds a { display: flex; justify-content: space-between; gap: 12px; min-height: 44px; align-items: center; padding: 0 16px; text-decoration: none; color: var(--ap-warm-ink); font: 400 14px/20px var(--ap-font-sans); }
.ap-knowledge-overview__kinds a:hover { background: var(--ap-mist); }
.ap-knowledge-overview__kinds a.is-empty { color: var(--ap-stone-600); }
.ap-knowledge-overview .ap-help { margin: 0; }
.ap-tray__decided > .ap-tray__cards { margin-top: 8px; gap: 8px; }

/* Knowledge extraction (Phase 3.5a-2): the tray, its cards and the strip. */
.ap-proposals-strip { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.ap-tray__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ap-tray__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ap-tray__bulk > .ap-help { flex: 1 1 280px; margin: 0; }
.ap-proposal[data-status="proposed"] { border-style: dashed; border-color: var(--ap-stone-300); } /* suggested, not approved */
.ap-proposal--decided { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 8px 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); }
.ap-proposal > .ap-badge { align-self: flex-start; }
.ap-proposal__quote { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-proposal__quote blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--ap-stone-300); font: 400 15px/22px var(--ap-font-serif, var(--ap-font-sans)); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-proposal__quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-proposal__match { margin: 0; display: flex; flex-direction: column; gap: 2px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-proposal .ap-article__actions form { margin: 0; }
.ap-propose__pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.ap-propose__page { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ap-propose__search { flex-direction: row; align-items: flex-end; gap: 12px; }
.ap-propose__search .ap-field { flex: 1; }
.ap-propose__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ap-propose__empty p { margin: 0; }
.ap-evidence__propose { margin: 4px 0 0; }

/* Topic check (Phase 3.5b-1): the article page's panel. */
.ap-topic { display: flex; flex-direction: column; gap: 8px; }
.ap-topic__checked { margin: 0; }
.ap-topic__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-topic__body p { margin: 0; }
.ap-topic__body a { color: inherit; text-decoration: underline 1px currentColor; text-underline-offset: 2px; }
.ap-topic__others { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.ap-topic__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.ap-topic__actions form { margin: 0; }
.ap-topic__override { flex-basis: 100%; }
.ap-topic .ap-callout > span a { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }

/* Duplicates report and daily sync (Phase 3.5b-2): the report's cards and
   the production channel's sync row. */
.ap-duplicates__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ap-duplicate__posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ap-duplicate__post { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-duplicate__post a, .ap-duplicate__keep a, .ap-duplicates .ap-callout a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; overflow-wrap: anywhere; }
.ap-duplicate__post .ap-meta { font-weight: 400; font-variant-numeric: tabular-nums; }
.ap-duplicate__keep { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-duplicates__checked, .ap-duplicate__dismissed, .ap-sync__status { font-variant-numeric: tabular-nums; }
.ap-setup-list > li.ap-sync-row { flex-wrap: wrap; }
.ap-sync { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* The switch and Save share the hour select's grid row, so they line up
   with the select whatever sits above or below it. */
.ap-sync__form { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; column-gap: 16px; row-gap: 6px; }
.ap-sync__form > .ap-field:first-of-type { grid-column: 1; grid-row: 2; }
.ap-sync__hour { display: contents; }
.ap-sync__hour > * { grid-column: 2; }
.ap-sync__hour > label { grid-row: 1; }
.ap-sync__hour > select { grid-row: 2; }
.ap-sync__form > .ap-form__actions { grid-column: 3; grid-row: 2; }
/* Search performance on the production channel's row (spec 5c §9.1): the
   service account's address as selectable code (Copy appears with JS), the
   matching properties as .ap-choice radios, the state as .ap-meta, a pause
   as .ap-callout--warn. */
.ap-search { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; scroll-margin-top: 24px; }
.ap-search__head { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-search__title { font-weight: 600; color: var(--ap-warm-ink); }
.ap-search__property { overflow-wrap: anywhere; }
.ap-search__status { font-variant-numeric: tabular-nums; }
.ap-search__address { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: 100%; }
.ap-search__address code { font: 400 13px/18px var(--ap-font-mono); color: var(--ap-warm-ink); overflow-wrap: anywhere; user-select: all; }
.ap-search__copy { height: 28px; padding: 0 12px; font-size: 13px; }
.ap-search__form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ap-search__properties { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ap-search__properties > legend { margin-bottom: 4px; padding: 0; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-search__properties .ap-choice__text { overflow-wrap: anywhere; }
.ap-search__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.ap-search__disconnect { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Spec 5c-2 §9.1: why and the optional line as .ap-help (a reading measure),
   the Users and permissions link as a ghost button on its own line. */
.ap-search > .ap-help { max-width: 65ch; }
.ap-search__demand { flex-basis: 100%; margin: 0; max-width: 65ch; }
.ap-search__users { margin: 0; }
/* The Facebook Page block on Setup → Destination (spec FB17): a peer of the
   Live site and Test copies groups, its state beside the head; one paper
   card in the Setup list's rhythm (12px between parts); the Page as a 32px
   round picture and its name; the Pages to choose from as hairline rows. */
.ap-facebook { margin-top: 20px; scroll-margin-top: 16px; }
.ap-facebook__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.ap-facebook-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-raised); background: var(--ap-paper); }
.ap-facebook-card form { margin: 0; }
.ap-facebook__line { margin: 0; max-width: 65ch; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); text-wrap: pretty; }
.ap-facebook__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ap-facebook__setup { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--ap-stone-200); }
.ap-facebook__steps { gap: 10px; max-width: 70ch; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-facebook__steps code { font: 400 13px/18px var(--ap-font-mono); color: var(--ap-warm-ink); overflow-wrap: anywhere; user-select: all; }
.ap-facebook__copyable { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.ap-facebook__snippet { margin: 6px 0 8px; padding: 10px 12px; border-radius: var(--ap-radius); background: var(--ap-mist); overflow-x: auto; tab-size: 2; }
.ap-facebook__snippet code { overflow-wrap: normal; white-space: pre; }
.ap-facebook__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ap-facebook__lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-facebook__name { width: fit-content; font: 600 16px/22px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: underline 1px transparent; text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color 150ms ease-out; }
.ap-facebook__name:hover { text-decoration-color: var(--ap-stone-300); }
.ap-facebook__when { font-variant-numeric: tabular-nums; }
.ap-facebook__avatar { flex: none; box-sizing: border-box; width: 32px; height: 32px; border: 1px solid var(--ap-stone-200); border-radius: 50%; object-fit: cover; background: var(--ap-mist); }
.ap-facebook__avatar--initial { display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-facebook__callout > svg { flex-shrink: 0; margin-top: 3px; }
.ap-facebook__callout-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-facebook__callout-lines p { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.ap-facebook__callout strong { font-weight: 600; }
.ap-facebook__choose { display: flex; flex-direction: column; gap: 12px; }
.ap-facebook__pages { min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-facebook__legend { margin-bottom: 4px; padding: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-facebook__page { align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-facebook__page:first-of-type { border-top: 1px solid var(--ap-stone-200); }
.ap-facebook__page input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ap-warm-ink); }
.ap-facebook__page-name { font: 500 14px/20px var(--ap-font-sans); overflow-wrap: anywhere; }
.ap-facebook__page.is-disabled { cursor: not-allowed; }
.ap-facebook__page.is-disabled .ap-facebook__page-name { color: var(--ap-stone-600); }
.ap-facebook__page.is-disabled .ap-facebook__avatar { opacity: 0.6; }
/* The Page's planning settings (plan 2): under the readiness list, after a hairline, as Form fields in the Setup list's rhythm. */
.ap-facebook__settings { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-facebook__subtitle { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-facebook__form { display: flex; flex-direction: column; gap: 20px; }
.ap-facebook__form .ap-setup-group { min-width: 0; }
.ap-facebook__form .ap-choice input { accent-color: var(--ap-warm-ink); }
.ap-facebook__counts { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ap-facebook__counts .ap-choice { align-items: center; font: 400 14px/20px var(--ap-font-sans); font-variant-numeric: tabular-nums; }
.ap-facebook__counts .ap-choice input { margin: 0; }
.ap-facebook__times { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ap-facebook__time .ap-input { width: 8rem; font-variant-numeric: tabular-nums; }
.ap-facebook__country { max-width: 18rem; }
.ap-facebook__country .ap-input { width: 100%; }
.ap-facebook__dates { display: flex; flex-direction: column; gap: 10px; }
.ap-facebook__dates .ap-setup-list > li { gap: 16px; }
.ap-facebook__dates .ap-setup-list__name { overflow-wrap: anywhere; }
.ap-facebook__settings + .ap-facebook__actions, .ap-facebook__logo-part + .ap-facebook__actions { padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
/* Plan 3, Task 11: this week's picture holds, one line under the Page; the logo on its pictures, after the settings. */
.ap-facebook__holds { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 18px; }
.ap-facebook__holds svg { flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; color: var(--ap-stone-500); }
.ap-facebook__logo-part { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-facebook__logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ap-facebook__logo-tile { display: grid; place-items: center; width: 80px; height: 80px; border-radius: var(--ap-radius); background: var(--ap-mist); }
.ap-facebook__logo { display: block; width: 64px; height: 64px; object-fit: contain; }
.ap-facebook__logo-field { max-width: 28rem; }
.ap-facebook__logo-field input[type="file"].ap-input { display: flex; align-items: center; padding: 6px 12px; font-size: 13px; color: var(--ap-stone-700); }
.ap-facebook__logo-field input[type="file"]::file-selector-button { margin-right: 12px; height: 28px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: transparent; font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-700); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ap-facebook__logo-field input[type="file"]::file-selector-button:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
@media (max-width: 480px) {
	.ap-facebook-card { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-facebook__name { transition: none; }
}
/* The Site's auto-review setting, above the channels (4c-2 ruling N1). */
.ap-auto-review__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
/* Publishing times on a connected channel's row (spec 4c §4.2). */
.ap-schedule { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ap-schedule__title { font-weight: 600; }
.ap-schedule__form { display: flex; flex-direction: column; gap: 12px; }
.ap-schedule__days { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; align-items: center; column-gap: 16px; row-gap: 6px; border: 0; margin: 0; padding: 0; }
.ap-schedule__days > legend, .ap-schedule__days > .ap-help, .ap-schedule__days > .ap-callout, .ap-schedule__days > .ap-error { grid-column: 1 / -1; }
.ap-schedule__day { display: contents; }
/* A day's time shows once the day is ticked: an empty or unused time box looked set (Safari greys in an example time) but is not saved. */
.ap-schedule__day:has(.ap-choice input:not(:checked)) > input[type="time"] { visibility: hidden; }
.ap-schedule__caps { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.ap-schedule__caps .ap-input { max-width: 8rem; }
@media (max-width: 1023px) {
	.ap-duplicate__posts { grid-template-columns: minmax(0, 1fr); }
}

/* Source inbox (Phase 3.5c-1): sidebar 248 · list 360 · pane fluid, as the
   Knowledge page. The list and pane roots span their columns. */
.ap-app.ap-app--sources { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-source-list, .ap-proof-col > .brxe-authorpilot-source-pane { align-self: stretch; }
/* The consent box starts hidden once app.js runs; .ap-field's display
   would otherwise override the hidden attribute. */
.ap-field[hidden] { display: none; }
@media (max-width: 1279px) {
	.ap-app.ap-app--sources { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--sources { grid-template-columns: minmax(0, 1fr); }
}

/* Authors page (Phase 3.6-1): sidebar 248 · list 360 · pane fluid, as the
   Knowledge page. The list and pane roots span their columns. */
.ap-app.ap-app--authors { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-author-list, .ap-proof-col > .brxe-authorpilot-author-pane { align-self: stretch; }
.ap-author-pane .ap-setup-group, .ap-author-pane .ap-setup-card, .ap-author-pane .ap-form { margin-top: 16px; }
.ap-author-pane .ap-decision__reject { margin-top: 16px; }
/* An author's Profile tab, laid out as Setup → Destination (DESIGN.md → Author page): groups
   40px apart, each part of the profile a folding card on the Destination's channel card. */
.ap-author-pane__status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ap-author-pane__intro { margin: -8px 0 0; }
.ap-author-groups { margin-top: 8px; }
.ap-author-groups .ap-form, .ap-author-groups .ap-setup-card { margin-top: 0; }
.ap-author-profile__form { gap: 12px; }
.ap-author-profile__form > .ap-form__actions { margin-top: 8px; }
.ap-author-fold__intro { margin: 0; }
.ap-author-pending__card { border-color: var(--ap-ember-border); }
.ap-author-pending__card .ap-fold__name { margin-bottom: -8px; }
.ap-author-publishes > .ap-form, .ap-author-publishes > .ap-setup-dl { margin: 0; }
.ap-author-self { gap: 16px; }
.ap-author-groups > .ap-channel-group--site { margin-top: 0; }
.ap-author-self > .ap-form__actions { flex-wrap: wrap; }
/* Setup → Content DNA and Templates, laid out as Setup → Destination (15 October 2026). */
.ap-dna-form { gap: 16px; }
.ap-dna-groups { margin-top: 12px; }
/* Set up Content DNA with AuthorFox (spec 2026-10-26): the start card, the
   walk of seven questions and the summary. Without app.js every question
   shows and the walk's buttons and progress stay hidden; app.js sets
   data-ap-guide-ready and shows one question at a time. */
.ap-guide { display: flex; flex-direction: column; gap: 16px; }
.ap-guide__progress { margin: 0; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-guide__q { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
/* Floated, the legend is a plain flex item: not drawn across the card's top border, and the gap applies. */
.ap-guide__q > legend { float: left; width: 100%; padding: 0; }
.ap-guide__q .ap-help, .ap-guide__q .ap-meta { margin: 0; }
.ap-guide__title { margin: 0; font: 600 20px/28px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-guide__title:focus { outline: none; }
.ap-guide__title:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-guide__title .ap-meta { font-weight: 400; }
.ap-guide__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip { align-items: center; gap: 8px; margin: 0; padding: 6px 13px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); font: 400 14px/20px var(--ap-font-sans); transition: border-color 120ms ease-out, background-color 120ms ease-out; }
.ap-chip input { margin: 0; }
.ap-chip:hover { border-color: var(--ap-stone-300); background: var(--ap-mist); }
.ap-chip:has(input:checked) { border-color: var(--ap-warm-ink); background: var(--ap-mist); }
.ap-chip:has(input:focus-visible) { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-guide__choices { display: flex; flex-direction: column; gap: 10px; }
.ap-guide__nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ap-guide__cancel { display: flex; }
.ap-guide-start--again .ap-help:empty { display: none; }
.ap-guide__form > summary { width: max-content; max-width: 100%; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; cursor: pointer; }
.ap-guide__form > summary:hover { color: var(--ap-warm-ink); }
.ap-guide__form[open] > summary { margin-bottom: 12px; }
.ap-guide__summary { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 12px 24px; margin: 0; }
.ap-guide__summary dt { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-guide__summary dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-guide__answer { min-width: 0; overflow-wrap: anywhere; }
.ap-guide__summary dd form { margin: 0; }
.ap-guide-summary > .ap-form__actions { flex-wrap: wrap; align-items: center; gap: 8px 16px; }
@media (max-width: 560px) {
	.ap-guide__q { padding: 16px; }
	.ap-guide__summary { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ap-guide__summary dd { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-chip { transition: none; }
}
.ap-guide[data-ap-guide-ready] .ap-guide__q:not([data-ap-guide-current]) { display: none; }
.ap-guide:not([data-ap-guide-ready]) .ap-guide__nav [data-ap-guide-back],
.ap-guide:not([data-ap-guide-ready]) .ap-guide__nav [data-ap-guide-next],
.ap-guide:not([data-ap-guide-ready]) .ap-guide__nav [data-ap-guide-skip],
.ap-guide:not([data-ap-guide-ready]) .ap-guide__progress { display: none; }
.ap-dna-form > .ap-help { margin: 8px 0 0; }
.ap-dna-versions { margin-top: 8px; }
.ap-dna-versions .ap-setup-list { border-top: 0; }
.ap-dna-versions .ap-setup-list > li:last-child { border-bottom: 0; }
/* A compound DNA box (traffic funnel plan 3, Q14): one fieldset whose legend reads as a field label, its number boxes side by side (6rem, tabular figures, each with its own smaller label); the funnel mix's total under them, warn-700 with its words when it is not 100. */
.ap-dna-compound { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.ap-dna-compound > legend { padding: 0; margin-bottom: 6px; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-dna-compound__parts { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ap-dna-compound__parts .ap-field { gap: 4px; }
.ap-dna-compound__parts label { font-weight: 400; color: var(--ap-stone-600); }
.ap-dna-compound__parts .ap-input { width: 6rem; font-variant-numeric: tabular-nums; }
.ap-dna-compound.is-invalid .ap-input { border-color: var(--ap-danger-border); }
.ap-dna-compound__sum { margin: 0; font: 500 13px/18px var(--ap-font-sans); font-variant-numeric: tabular-nums; color: var(--ap-stone-600); }
.ap-dna-compound__sum.is-off { color: var(--ap-warn-700); }
.ap-templates { margin-top: 12px; }
.ap-template__part { margin: 0 0 2px; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-template__author, .ap-template__toggle { padding-top: 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-template__author { gap: 16px; }
.ap-template__toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.ap-template__toggle .ap-help { flex: 1 1 200px; margin: 0; }
.ap-template__types { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1279px) {
	.ap-app.ap-app--authors { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--authors { grid-template-columns: minmax(0, 1fr); }
}

/* Offers page: sidebar 248 · list 360 · pane fluid, as the Authors page. */
.ap-app.ap-app--offers { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-offer-list, .ap-proof-col > .brxe-authorpilot-offer-pane { align-self: stretch; }
.ap-offer-pane .ap-setup-card, .ap-offer-pane .ap-request { margin-top: 16px; }
.ap-offer-pane .ap-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 16px 0; }
.ap-offer-pane .ap-facts dt { color: var(--ap-stone-600); }
.ap-offer-pane .ap-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1279px) {
	.ap-app.ap-app--offers { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--offers { grid-template-columns: minmax(0, 1fr); }
}

/* Series page (series planner plan 1): sidebar 248 · list 360 · pane fluid, as the Offers page. */
.ap-app.ap-app--series { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-series-list, .ap-proof-col > .brxe-authorpilot-series-pane { align-self: stretch; }
@media (max-width: 1279px) {
	.ap-app.ap-app--series { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--series { grid-template-columns: minmax(0, 1fr); }
}
/* The plan is the Plan page's table (.ap-plan__table); only two things are its own: the pin beside a date a person set, and Add article here as a thin row between articles. */
.ap-series__pin { display: inline-flex; margin-left: 4px; vertical-align: -2px; color: var(--ap-stone-600); }
.ap-plan__table td.ap-series__add { padding: 4px 12px; }
.ap-series__add .ap-btn { height: 28px; }
/* Plan 2: plain-button forms sit among the dialog triggers; the ideas list. */
.ap-article__actions > form { display: contents; }
/* Series page: five-plus buttons must wrap beside the title, not squeeze it to a sliver. */
@media (min-width: 1024px) {
	.ap-series__pane .ap-article__heading { flex: 1 1 280px; min-width: 240px; }
	.ap-series__pane .ap-article__actions { flex: 0 1 auto; justify-content: flex-end; min-width: 0; }
}
/* The list column: Your series first, then Ideas for new series under a hairline; a section label reads as the switcher's group label. */
.ap-series__section { display: flex; flex-direction: column; gap: 4px; }
.ap-series__group { margin: 8px 8px 4px; font: 500 12px/1.3 var(--ap-font-sans); color: var(--ap-stone-600); text-transform: uppercase; letter-spacing: 0.04em; }
.ap-series__finished > summary { cursor: pointer; }
.ap-series__finished[open] > summary { margin-bottom: 8px; }
.ap-series__ideas { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 24px; padding: 20px 8px 0; border-top: 1px solid var(--ap-stone-200); }
.ap-series__ideas-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ap-series__ideas .ap-queue__list { gap: 12px; }
.ap-series__idea { list-style: none; border-style: dashed; border-color: var(--ap-stone-300); } /* suggested, not approved (DESIGN.md Do's) */
.ap-series__idea-more > summary { cursor: pointer; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-series__idea-more[open] > summary { margin-bottom: 8px; }
.ap-series__idea-more > p { margin: 0 0 8px; }
.ap-series__idea-titles { margin: 0; padding-left: 20px; }
/* The pane with no series open: every series in the plan's table. Below 1024px the list stands above it and says the same, so it is left out. */
.ap-series__overview { display: flex; flex-direction: column; gap: 16px; }
/* Four short columns fit the pane, so the table stays a table: no container, so the plan's narrow-pane cards never apply. */
.ap-series__overview .ap-plan__table-wrap { container-type: normal; }
.ap-series__overview .ap-plan__table td { vertical-align: middle; }
.ap-series__overview .ap-help { margin: 0; }
.ap-series__overview td .ap-meta { display: block; margin-top: 2px; }
.ap-series__overview-name { font-weight: 500; color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-series__overview-name:hover { text-decoration-color: currentColor; }
.ap-series__overview-progress { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .ap-series__overview { display: none; } }
.ap-series__close a { color: inherit; }
.ap-modal__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--ap-stone-200); }

/* Source inbox detail (Phase 3.5c-1): the item cards reuse the tray's
   cards (ap-proposal, ap-setup-card); a kind's group spaces its heading
   and cards like the tray. */
.ap-source__group { display: flex; flex-direction: column; gap: 12px; }
.ap-source__status a { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }

/* Article ideas page (Phase 4b-1, spec §12.1; simplified 2026-10-20):
   sidebar 248 · title column 360 · pane fluid, as the Articles page.
   Existing tokens only: each idea a paper card with a dashed stone-300
   border (DESIGN.md: suggested, not decided), its buttons always in view,
   the score's parts folded under Details with stone-500 for "Not
   measured" (on paper), the reason / provenance line, the quiet lists. */
.ap-app.ap-app--plan { grid-template-columns: 248px 360px minmax(0, 1fr); }
.ap-queue-col > .brxe-authorpilot-plan-runs, .ap-proof-col > .brxe-authorpilot-plan-pane { align-self: stretch; }
.ap-plan-runs__meta { font-variant-numeric: tabular-nums; }
.ap-plan-runs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 8px; }
.ap-plan-runs__intro { margin: 0 0 4px; padding: 0 8px; max-width: 44ch; }
.ap-plan-runs > .ap-plan-runs__busy { padding: 0 8px; }
/* Modal (DESIGN.md → Modal; plan-confirm.php): a native dialog over the navy-tinted scrim, opened by invoker commands. */
.ap-modal { box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: var(--ap-radius-raised); background: var(--ap-paper); color: var(--ap-warm-ink); box-shadow: var(--ap-shadow-raised); text-align: left; }
.ap-modal::backdrop { background: rgba(2, 22, 56, 0.24); }
.ap-modal[open] { animation: ap-modal-in 200ms cubic-bezier(0.2, 0, 0, 1); }
.ap-modal[open]::backdrop { animation: ap-modal-fade 200ms cubic-bezier(0.2, 0, 0, 1); }
@keyframes ap-modal-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes ap-modal-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ap-modal[open], .ap-modal[open]::backdrop { animation: none; } }
.ap-modal__form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ap-modal__title { margin: 0; font: 600 22px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-modal__subject { align-self: flex-start; margin: 0; padding: 1px 6px; border-radius: var(--ap-radius); background: var(--ap-mist); font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-modal__steps { display: grid; gap: 6px; margin: 0; padding-left: 20px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 480px) { .ap-modal__actions { flex-direction: column-reverse; } .ap-modal__actions .ap-btn { width: 100%; justify-content: center; } }
.ap-plan__meta, .ap-plan__cost, .ap-ideas__score { font-variant-numeric: tabular-nums; }
.ap-plan-runs__busy a, .ap-plan__older a, .ap-plan__requests a, .ap-plan__section a, .ap-article__provenance a, .ap-plan .ap-article__decision a, .ap-plan [data-ap-progress-note] a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-plan { max-width: var(--ap-page-wide); }
/* Ideas being found: what the mode does, and Stop with its help under it. */
.ap-plan__mode { margin: 0 0 12px; max-width: 68ch; }
.ap-plan__stop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 20px 0 0; }
.ap-plan__stop .ap-help { max-width: 68ch; }
.ap-plan__table-wrap { overflow-x: auto; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-plan__table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-plan__table th { padding: 10px 12px; border-bottom: 1px solid var(--ap-stone-200); background: var(--ap-parchment); font: 500 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.ap-plan__table td { padding: 12px; border-bottom: 1px solid var(--ap-stone-200); vertical-align: top; }
.ap-plan__table tbody tr:last-child td { border-bottom: 0; }
.ap-plan__table .ap-plan__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-plan__main { min-width: 220px; }
.ap-plan__table-wrap { container-type: inline-size; }
.ap-plan__table th { white-space: normal; }
/* In a narrow pane a proposal is a card, not a row that scrolls sideways: its facts sit in one line, the title and reason below. */
@container (max-width: 1000px) {
	.ap-plan__table, .ap-plan__table tbody { display: block; }
	.ap-plan__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.ap-plan__table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border-bottom: 1px solid var(--ap-stone-200); }
	.ap-plan__table tbody tr:last-child { border-bottom: 0; }
	.ap-plan__table td { display: block; padding: 0; border: 0; }
	.ap-plan__table td.ap-plan__num { text-align: left; }
	.ap-plan__table .ap-plan__main { order: 5; flex: 1 0 100%; min-width: 0; }
}
.ap-plan__title { display: block; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-plan__reason, .ap-article__provenance { display: flex; align-items: flex-start; gap: 6px; }
.ap-plan__reason { margin-top: 4px; }
.ap-plan__reason svg, .ap-article__provenance svg { flex-shrink: 0; margin-top: 2px; }
.ap-plan__components { display: grid; grid-template-columns: max-content max-content; gap: 4px 16px; margin: 0 0 10px; font: 400 13px/18px var(--ap-font-sans); }
.ap-plan__components dt { color: var(--ap-stone-600); }
.ap-plan__components dd { margin: 0; color: var(--ap-warm-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ap-plan__components dd.ap-plan__unknown { color: var(--ap-stone-500); }
.ap-plan__no-action svg, .ap-plan__older svg { flex-shrink: 0; margin-top: 3px; }
.ap-plan__no-action p, .ap-plan__older p { margin: 0; }
.ap-plan__requests { margin: 6px 0 0; padding-left: 18px; }
.ap-plan__section { display: flex; flex-direction: column; gap: 10px; }
.ap-plan__section .ap-setup-list > li { flex-wrap: wrap; }
.ap-plan__quiet .ap-setup-list__name { font-weight: 400; color: var(--ap-stone-700); }
/* The ideas: one card each, best first; the title in Newsreader (an article title), the buttons in one row, Details folded under them. */
.ap-ideas { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-ideas__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-ideas__title { margin: 0; font: 600 19px/1.3 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-ideas__item .ap-plan__reason { margin: 0; }
.ap-ideas__by { margin: 0; }
.ap-ideas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ap-ideas__details > summary, .ap-ideas__left > summary { cursor: pointer; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-ideas__details > summary { margin-top: 4px; }
.ap-ideas__details[open] > summary { margin-bottom: 10px; }
.ap-ideas__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.ap-ideas__left[open] > summary { margin-bottom: 10px; }
@media (max-width: 767px) { .ap-ideas__item { padding: 14px 16px; } }
@media (max-width: 1279px) {
	.ap-app.ap-app--plan { grid-template-columns: 248px 320px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--plan { grid-template-columns: minmax(0, 1fr); }
}

/* Calendar page (Phase 4c-1, spec §6.3): sidebar 248 · pane fluid (no list
   column). The week is an agenda grouped by day (DESIGN.md: "the calendar
   becomes an agenda list"): each day a hairline list on paper, each row
   the local time in tabular numerals beside the badge, title and meta.
   Below 768px the time stacks over the row and the move fields over each
   other, so nothing scrolls sideways. Existing tokens only. */
.ap-app.ap-app--calendar { grid-template-columns: 248px minmax(0, 1fr); }
.ap-proof-col > .brxe-authorpilot-calendar-pane { align-self: stretch; }
.ap-calendar { display: flex; flex-direction: column; gap: 24px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-calendar__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-calendar__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-calendar__heading .ap-meta { font-variant-numeric: tabular-nums; }
.ap-calendar__weeks { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-calendar__intro { margin: 0; max-width: 60ch; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-calendar__intro a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-calendar__times { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-calendar__times-head { display: flex; align-items: center; gap: 6px; }
.ap-calendar__times-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ap-calendar__times-row > p { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-modal--wide { width: min(640px, calc(100vw - 32px)); overflow-y: auto; }
.ap-modal--wide[open] { display: flex; flex-direction: column; gap: 12px; }
.ap-modal--wide .ap-schedule { gap: 0; }
.ap-modal--wide .ap-form__actions { justify-content: flex-end; }
.ap-calendar__day { display: flex; flex-direction: column; gap: 10px; }
.ap-calendar__day h2 { font-variant-numeric: tabular-nums; }
.ap-calendar__day.is-today h2 { text-decoration: underline 2px var(--ap-stone-300); text-underline-offset: 6px; }
.ap-calendar__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-calendar__row { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-calendar__row:last-child { border-bottom: 0; }
.ap-calendar__time { font: 500 13px/20px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-calendar__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ap-calendar__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ap-calendar__title { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-calendar a.ap-calendar__title { color: var(--ap-warm-ink); text-decoration: none; }
.ap-calendar a.ap-calendar__title:hover { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-calendar__reason { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-calendar__reason svg { flex-shrink: 0; margin-top: 2px; }
.ap-calendar__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 400 13px/18px var(--ap-font-sans); }
.ap-calendar__links a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-calendar__why > summary, .ap-calendar__move > summary { cursor: pointer; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-calendar__why[open] > summary { margin-bottom: 6px; }
.ap-calendar__why p + p { margin-top: 2px; }
.ap-calendar__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-top: 4px; }
.ap-calendar__actions form { margin: 0; }
.ap-calendar__move { flex: 1 1 280px; align-self: center; }
.ap-calendar__move[open] { align-self: flex-start; }
.ap-calendar__move[open] > summary { margin-bottom: 12px; }
.ap-calendar__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px 16px; }
.ap-calendar__fields .ap-input { box-sizing: border-box; width: 100%; font-variant-numeric: tabular-nums; }
/* The week at a glance (spec 2026-10-22): seven day cells with a dot per
   row in its badge's colour (the colour is never the only signal: each
   cell says its rows in words to screen readers, and every row below has
   its badge), today ringed, past days quieter; the week's count under it.
   A row's left edge carries the same colour; an empty run of days is one
   quiet line. */
.ap-cal-glance { display: flex; flex-direction: column; gap: 10px; padding: 8px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-cal-glance__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ap-cal-glance__day a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 8px 4px; border-radius: var(--ap-radius); color: var(--ap-warm-ink); text-decoration: none; transition: background-color 150ms ease-out; }
.ap-cal-glance__day a:hover { background: var(--ap-mist); }
.ap-cal-glance__day a:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-cal-glance__weekday { font: 500 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-cal-glance__date { font: 600 22px/28px var(--ap-font-serif); font-variant-numeric: tabular-nums; }
.ap-cal-glance__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 56px; min-height: 7px; margin-top: 4px; }
.ap-cal-glance__dot { width: 7px; height: 7px; border-radius: var(--ap-radius-pill); background: var(--ap-stone-400); }
.ap-cal-glance__day.is-today a { box-shadow: inset 0 0 0 1.5px var(--ap-warm-ink); }
.ap-cal-glance__day.is-today .ap-cal-glance__weekday { color: var(--ap-warm-ink); font-weight: 600; }
.ap-cal-glance__day.is-past .ap-cal-glance__date, .ap-cal-glance__day.is-empty .ap-cal-glance__date { color: var(--ap-stone-500); }
.ap-cal-glance__day.is-past .ap-cal-glance__dots { opacity: 0.6; }
.ap-cal-glance__count { margin: 0; padding: 8px 8px 2px; border-top: 1px solid var(--ap-stone-200); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind] { --ap-cal-kind: var(--ap-stone-400); }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind="ok"] { --ap-cal-kind: var(--ap-ok-700); }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind="warn"] { --ap-cal-kind: var(--ap-warn-700); }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind="danger"] { --ap-cal-kind: var(--ap-danger-700); }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind="needs"] { --ap-cal-kind: var(--ap-ember); }
:is(.ap-cal-glance__dot, .ap-calendar__row)[data-kind="sched"] { --ap-cal-kind: var(--ap-warm-ink); }
.ap-cal-glance__dot[data-kind] { background: var(--ap-cal-kind); }
.ap-calendar__row[data-kind] { box-shadow: inset 3px 0 0 var(--ap-cal-kind); }
.ap-calendar__row:first-child { border-top-left-radius: var(--ap-radius); }
.ap-calendar__row:last-child { border-bottom-left-radius: var(--ap-radius); }
.ap-calendar__today { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--ap-radius-pill); background: var(--ap-mist); font: 500 12px/18px var(--ap-font-sans); color: var(--ap-warm-ink); vertical-align: 3px; }
.ap-calendar__day.is-past h2 { color: var(--ap-stone-600); }
.ap-calendar__quiet { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 2px 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-500); font-variant-numeric: tabular-nums; }
.ap-calendar__quiet-days { font-weight: 500; color: var(--ap-stone-600); }
.ap-calendar__quiet.is-today .ap-calendar__quiet-days { color: var(--ap-warm-ink); }
.ap-calendar__anchor { position: absolute; top: -16px; }
.ap-calendar__day, .ap-calendar__quiet { scroll-margin-top: 16px; }
.ap-calendar a.ap-calendar__site { font-weight: 500; color: var(--ap-warm-ink); }
@media (prefers-reduced-motion: reduce) { .ap-cal-glance__day a { transition: none; } }
@media (max-width: 1023px) {
	.ap-app.ap-app--calendar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ap-calendar__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.ap-cal-glance__days { gap: 2px; }
	.ap-cal-glance__day a { min-height: 64px; padding: 6px 2px; }
	.ap-cal-glance__date { font-size: 18px; line-height: 24px; }
	.ap-cal-glance__weekday { font-size: 11px; letter-spacing: -0.01em; white-space: nowrap; }
	.ap-calendar__fields { grid-template-columns: minmax(0, 1fr); }
}

/* Notifications page and the bell (Phase 4c-2, ruling N14): sidebar 248 ·
   pane fluid, as the Calendar. The list is the Calendar's hairline rows on
   paper: the time in tabular numerals beside the title, body and event;
   an unread row carries the Ember dot (a word for screen readers beside
   it) and a heavier title, which is a button that reads and opens. The
   preferences are a quiet table in a <details>. The bell sits in the
   sidebar's user block before Sign out, its count in tabular numerals.
   Below 768px the time stacks over the row and the table scrolls inside
   its own box, so the page never scrolls sideways. Existing tokens only. */
.ap-app.ap-app--notifications { grid-template-columns: 248px minmax(0, 1fr); }
.ap-proof-col > .brxe-authorpilot-notifications-pane { align-self: stretch; }
.ap-notifications { display: flex; flex-direction: column; gap: 20px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-notifications__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-notifications__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-notifications__heading .ap-meta { font-variant-numeric: tabular-nums; }
.ap-notifications__head form { margin: 0; }
.ap-notifications > .ap-tabs { padding: 0; }
.ap-notifications__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-notifications__row { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-notifications__row:last-child { border-bottom: 0; }
.ap-notifications__time { font: 500 13px/20px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-notifications__main { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ap-notifications__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ap-notifications__open { margin: 0; min-width: 0; }
.ap-notifications__title { display: inline; margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: none; overflow-wrap: anywhere; }
.ap-notifications__row.is-unread .ap-notifications__title { font-weight: 600; }
.ap-notifications .ap-notifications__title:hover { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-notifications__body { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); overflow-wrap: anywhere; }
.ap-notifications__read { margin: 6px 0 0; }
.ap-notifications__more { margin: 0; }
.ap-notifications__prefs { padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-notifications__prefs > summary { cursor: pointer; font: 600 15px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-notifications__prefs[open] > summary { margin-bottom: 16px; }
.ap-notifications__prefs .ap-form { display: flex; flex-direction: column; gap: 16px; }
.ap-notifications__table-wrap { overflow-x: auto; }
.ap-notifications__table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-notifications__table th, .ap-notifications__table td { padding: 10px 12px; border-bottom: 1px solid var(--ap-stone-200); text-align: left; vertical-align: top; }
.ap-notifications__table thead th { font: 500 12px/1.3 var(--ap-font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ap-stone-600); background: var(--ap-parchment); }
.ap-notifications__table thead th:not(:first-child), .ap-notifications__table td { width: 120px; text-align: center; }
.ap-notifications__table tbody th { font-weight: 500; color: var(--ap-warm-ink); }
.ap-notifications__table tbody th .ap-meta { margin-top: 2px; font-weight: 400; }
.ap-notifications__table tbody tr:last-child > * { border-bottom: 0; }
.ap-notifications__table input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ap-warm-ink); }
.ap-notifications__none { color: var(--ap-stone-500); }
.ap-nav__bell { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border-radius: var(--ap-radius-pill); color: var(--ap-stone-600); text-decoration: none; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-nav__bell svg { width: 16px; height: 16px; }
.ap-nav__bell:hover, .ap-nav__bell[aria-current="page"] { background: var(--ap-mist); color: var(--ap-warm-ink); }
.ap-nav__bell .ap-nav__count { margin-left: 0; }
@media (max-width: 1023px) {
	.ap-app.ap-app--notifications { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ap-notifications__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.ap-notifications__table thead th:not(:first-child), .ap-notifications__table td { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-nav__bell { transition: none; }
}

/* Hub assistant (Phase 4.5-2, DESIGN.md Components → Hub assistant; spec
   4.5 §10, H19): the launcher at the sidebar foot, and the rail docked at
   the right. The rail is a complementary landmark that is not modal; at
   1408px and wider the page makes room (body.ap-assistant-open, ruling Q6)
   and from 1408 to 1663px takes its 1024–1279px layout beside it (the
   Calendar and Notifications pages keep their two columns); from
   1024 to 1407px the rail lies over the page as a drawer; below 1024px it
   is a full-width sheet. Every message is built by assistant.js with
   textContent; this sheet styles the shell and the nodes it makes. */
.ap-assistant-launcher { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); font: 500 14px/1 var(--ap-font-sans); color: var(--ap-warm-ink); cursor: pointer; text-align: left; transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.ap-assistant-launcher[hidden] { display: none; }
.ap-assistant-launcher img { width: 20px; height: 20px; flex-shrink: 0; }
.ap-assistant-launcher__label { flex: 1; }
.ap-assistant-launcher:hover, .ap-assistant-launcher:focus-visible, .ap-assistant-launcher[aria-expanded="true"] { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-assistant-launcher__count { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-assistant-launcher__count[hidden] { display: none; }
/* The sidebar foot's launchers (DESIGN.md Help and navigation): Help and
   getting started in the same pill, directly above Ask AuthorFox. */
.ap-nav__launchers { display: flex; flex-direction: column; gap: 6px; }
.ap-help-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }

.ap-assistant { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; width: 384px; background: var(--ap-parchment); border-left: 1px solid var(--ap-stone-200); font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-assistant[hidden] { display: none; }
.ap-assistant__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-assistant__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-assistant__title { margin: 0; font: 600 20px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); }
.ap-assistant__meta { margin: 0; font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-assistant__tools { display: flex; gap: 4px; flex-shrink: 0; }
.ap-assistant__tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-stone-600); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-assistant__tool svg { width: 16px; height: 16px; }
.ap-assistant__tool:hover, .ap-assistant__tool[aria-expanded="true"] { background: var(--ap-mist); color: var(--ap-warm-ink); }
.ap-assistant__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.ap-assistant__conversation, .ap-assistant__recent { display: flex; flex-direction: column; gap: 16px; }
.ap-assistant__recent[hidden], .ap-assistant__conversation[hidden] { display: none; }

/* Messages */
.ap-assistant__member { align-self: flex-end; max-width: 86%; margin: 0; padding: 10px 12px; border-radius: var(--ap-radius); background: var(--ap-mist); color: var(--ap-warm-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-assistant__reply { margin: 0; color: var(--ap-stone-700); white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-assistant__lookups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-assistant__lookup { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-assistant__lookup svg { width: 14px; height: 14px; color: var(--ap-ok-700); flex-shrink: 0; }
.ap-assistant__glyph { display: inline-flex; width: 16px; justify-content: center; font-weight: 600; }
.ap-assistant__lookup .ap-assistant__glyph { color: var(--ap-ok-700); }
.ap-assistant__lookup.is-working { color: var(--ap-warm-ink); font-weight: 500; }
.ap-assistant__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 400 13px/18px var(--ap-font-sans); }
.ap-assistant__links a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-assistant .ap-callout { font-size: 13px; line-height: 18px; }
.ap-assistant__fade { animation: ap-assistant-in 150ms var(--ap-ease); }
@keyframes ap-assistant-in { from { opacity: 0; } to { opacity: 1; } }

/* Composer */
.ap-assistant__composer { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; border-top: 1px solid var(--ap-stone-200); background: var(--ap-parchment); }
.ap-assistant__row { display: flex; align-items: flex-end; gap: 8px; }
.ap-assistant__field { flex: 1; min-height: 40px; max-height: 120px; resize: none; overflow-y: auto; }
.ap-assistant__field.is-working, .ap-assistant__field:disabled { background: var(--ap-mist); }
.ap-assistant__send { height: 40px; flex-shrink: 0; }
.ap-assistant__helper { font-size: 12px; line-height: 16px; }

/* Proposal card, loosening confirmation, outcome */
.ap-assistant__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-assistant__card--loosening, .ap-assistant__card--outcome { border-style: solid; border-color: var(--ap-stone-200); }
.ap-assistant__card-head { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-assistant__card-head .ap-meta { margin-left: auto; }
.ap-assistant__steps { list-style: none; margin: 0; padding: 0; counter-reset: ap-step; border-top: 1px solid var(--ap-stone-200); }
.ap-assistant__step { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--ap-stone-200); counter-increment: ap-step; }
.ap-assistant__step::before { content: counter(ap-step) "."; font: 500 13px/20px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-assistant__line { margin: 0; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-assistant__value { display: inline; padding: 1px 6px; border-radius: var(--ap-radius); background: var(--ap-mist); color: var(--ap-warm-ink); font-weight: 500; unicode-bidi: isolate; }
.ap-assistant__cost { grid-column: 2; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-assistant__detail { grid-column: 2; }
.ap-assistant__detail > summary { cursor: pointer; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-assistant__quote { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--ap-radius); background: var(--ap-mist); display: flex; flex-direction: column; gap: 4px; }
.ap-assistant__quote dt { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-assistant__quote dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate; }
.ap-assistant__quote dd::before, .ap-assistant__quote dd::after { content: "\201C"; color: var(--ap-stone-600); }
.ap-assistant__quote dd::after { content: "\201D"; }
.ap-assistant__foot { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-assistant__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } /* a long named pill drops Dismiss to its own line */
.ap-assistant__rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font: 400 14px/20px var(--ap-font-sans); }
.ap-assistant__rows dt { color: var(--ap-stone-600); }
.ap-assistant__rows dd { margin: 0; color: var(--ap-warm-ink); overflow-wrap: anywhere; unicode-bidi: isolate; }
.ap-assistant__rows dd + dd { grid-column: 2; }
.ap-assistant__consequence { margin: 0; color: var(--ap-warm-ink); }
.ap-assistant__ack { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; color: var(--ap-warm-ink); } /* Bricks paints bare labels stone-light with a 5px margin */
.ap-assistant__ack input { margin-top: 3px; accent-color: var(--ap-warm-ink); }
.ap-assistant__result { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--ap-font-sans); }
.ap-assistant__result svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-assistant__result--done { color: var(--ap-ok-700); }
.ap-assistant__result--failed { color: var(--ap-danger-700); }
.ap-assistant__result--skipped { color: var(--ap-stone-600); }
.ap-assistant__result--unknown { color: var(--ap-warn-700); }
.ap-assistant__reason { grid-column: 2; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-assistant__step > .ap-assistant__result, .ap-assistant__step > .ap-assistant__links { grid-column: 2; }

/* Empty, blocked and recent */
.ap-assistant__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.ap-assistant__empty img { width: 40px; height: 40px; }
.ap-assistant__lead { margin: 0; font: 600 22px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); }
.ap-assistant__examples { list-style: none; margin: 0; padding: 0; align-self: stretch; display: flex; flex-direction: column; border-top: 1px solid var(--ap-stone-200); }
.ap-assistant__example { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--ap-stone-200); background: var(--ap-paper); font: 400 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); text-align: left; cursor: pointer; }
.ap-assistant__example:hover { background: var(--ap-mist); }
.ap-assistant__recent-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-stone-200); }
.ap-assistant__recent-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-assistant__recent-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-assistant__recent-open .ap-meta { font-size: 12px; line-height: 16px; }
.ap-assistant__confirm-delete { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }

/* The rail beside the page (ruling Q6). */
@media (min-width: 1408px) {
	body.ap-assistant-open .ap-app { margin-right: 384px; width: auto; }
}
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app { grid-template-columns: 248px 320px minmax(0, 1fr); }
	body.ap-assistant-open .ap-evidence-col { grid-column: 3; border-top: 1px solid var(--ap-stone-200); background: var(--ap-paper); }
	body.ap-assistant-open .ap-app.ap-app--articles, body.ap-assistant-open .ap-app.ap-app--setup, body.ap-assistant-open .ap-app.ap-app--knowledge, body.ap-assistant-open .ap-app.ap-app--sources, body.ap-assistant-open .ap-app.ap-app--authors, body.ap-assistant-open .ap-app.ap-app--offers, body.ap-assistant-open .ap-app.ap-app--plan, body.ap-assistant-open .ap-app.ap-app--series { grid-template-columns: 248px 320px minmax(0, 1fr); }
	body.ap-assistant-open .ap-app.ap-app--calendar, body.ap-assistant-open .ap-app.ap-app--notifications { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-width: 1407px) {
	.ap-assistant { box-shadow: var(--ap-shadow-raised); }
}
@media (max-width: 1023px) {
	.ap-assistant { width: 100%; border-left: 0; }
}
.ap-assistant.is-opening { animation: ap-assistant-slide 200ms var(--ap-ease); }
@keyframes ap-assistant-slide { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.ap-assistant.is-opening, .ap-assistant__fade { animation: none; }
	.ap-assistant-launcher, .ap-assistant__tool { transition: none; }
}

/* The rail's tabs and the Help tab (spec 2026-10-08 §6; DESIGN.md Help and navigation). */
.ap-rail__head { align-items: center; }
.ap-rail__tabs { display: flex; gap: 4px; }
.ap-rail__tab { padding: 6px 12px; border: 0; border-radius: var(--ap-radius-pill); background: transparent; font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-600); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-rail__tab:hover, .ap-rail__tab[aria-selected="true"] { background: var(--ap-mist); color: var(--ap-warm-ink); }
.ap-rail__panel[hidden], .ap-assistant__tool[hidden] { display: none; }
.ap-rail__panel--ask { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ap-rail__meta { padding: 12px 20px 0; }
.ap-rail__meta:empty { display: none; }
.ap-help-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 28px; }
.ap-help-panel__block { display: flex; flex-direction: column; gap: 10px; }
.ap-help-panel__title { margin: 0; font: 600 20px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); }
.ap-help-panel__sub { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font: 600 11px/16px var(--ap-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-stone-500); }
.ap-help-panel__purpose { margin: 0; font: 400 15px/22px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-help-panel__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.ap-help-area { border-top: 1px solid var(--ap-stone-200); padding: 10px 0; }
.ap-help-area > summary { cursor: pointer; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-help-area > p { margin: 8px 0; color: var(--ap-stone-700); }
.ap-help-area__ask { padding: 0; border: 0; background: none; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline; text-decoration-color: var(--ap-stone-300); text-underline-offset: 3px; cursor: pointer; }
.ap-help-area__ask:hover { color: var(--ap-warm-ink); }
.ap-started { list-style: none; margin: 0; padding: 0; }
.ap-started__row + .ap-started__row { border-top: 1px solid var(--ap-stone-200); }
.ap-started__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; }
.ap-started__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-started__label { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-started__summary { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-started__link:hover .ap-started__label { text-decoration: underline; }
.ap-how { margin: 0; }
.ap-how dt { font: 500 14px/20px var(--ap-font-sans); }
.ap-how dt a { color: var(--ap-warm-ink); }
.ap-how dt a[aria-current="page"] { font-weight: 600; }
.ap-how dd { margin: 2px 0 10px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
/* The "?" link beside a hard spot (DESIGN.md Help and navigation): the help
   icon in a 24px round button, so it meets the 24px target by itself. */
.ap-help-link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; vertical-align: middle; border: 0; border-radius: var(--ap-radius-pill); background: transparent; color: var(--ap-stone-500); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.ap-help-link svg { width: 16px; height: 16px; }
.ap-help-link[hidden] { display: none; }
/* A heading with its "?" beside it, not inside it, so the heading's accessible name is the heading alone. */
.ap-heading-help { display: flex; align-items: center; gap: 4px; }
.ap-help-link:hover, .ap-help-link:focus-visible { background: var(--ap-mist); color: var(--ap-warm-ink); }
.ap-help-link:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.ap-rail__tab, .ap-help-link { transition: none; }
}

/* Suggestions page (spec 5a §8.2, ruling S13): one card per suggestion on
   paper in a hairline frame. A change reads as the review diff does
   (DESIGN.md Review diff): an addition underlined in ok-700 on its tint, a
   removal struck through in danger-700 on its tint, each with a +/− glyph
   so colour is never the only marker. Existing tokens only. */
.ap-app.ap-app--suggestions { grid-template-columns: 248px minmax(0, 1fr); }
.ap-suggestions { display: flex; flex-direction: column; gap: 20px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-suggestions__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-suggestions__count { font-variant-numeric: tabular-nums; }
.ap-suggestions > .ap-tabs { padding: 0; }
.ap-suggestions__list, .ap-suggestions__quiet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ap-suggestions__more { margin: 0; }
.ap-suggestion { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-suggestion__target { margin: 0; font: 600 20px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-suggestion__from, .ap-suggestion__why { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); overflow-wrap: anywhere; }
.ap-suggestion__from a { margin-left: 4px; color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-suggestion__label { margin-right: 4px; font-weight: 500; color: var(--ap-stone-600); }
.ap-suggestion__form { display: flex; flex-direction: column; gap: 16px; }
.ap-suggestion__ops { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ap-stone-200); }
.ap-suggestion__op { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ap-stone-200); }
.ap-suggestion__op-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-suggestion__op-head .ap-check { font-weight: 500; }
.ap-suggestion__field { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-suggestion__change { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 400 14px/20px var(--ap-font-sans); }
.ap-suggestion__ins, .ap-suggestion__del { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 6px; border-radius: var(--ap-radius); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate; }
.ap-suggestion__ins { color: var(--ap-ok-700); background: var(--ap-ok-tint); text-decoration: underline 1px; text-underline-offset: 2px; }
.ap-suggestion__del { color: var(--ap-danger-700); background: var(--ap-danger-tint); text-decoration: line-through 1px; }
.ap-suggestion__glyph { font-weight: 600; text-decoration: none; }
.ap-suggestion__now { overflow-wrap: anywhere; }
.ap-suggestion__value { max-width: 640px; }
.ap-suggestion__reject > summary { cursor: pointer; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-suggestion__reject[open] > summary { margin-bottom: 12px; }
.ap-suggestion__reject .ap-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.ap-suggestion--quiet { gap: 8px; padding: 16px; }
.ap-suggestion--quiet form { margin: 0; }
.ap-suggestions__none { padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-suggestions__none > summary { cursor: pointer; font: 600 15px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-suggestions__none[open] > summary { margin-bottom: 16px; }
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app.ap-app--suggestions { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--suggestions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ap-suggestion { padding: 16px; }
}

/* Home (spec 4.6 §2, §7; DESIGN.md Home / attention queue, Attention queue
   row, Page header, Status badge, Reason / provenance line): one main column
   beside the sidebar, blocks stacked in the order of the spec, quiet tiles
   in a row. The attention queue reuses the inbox's .ap-queue class names, so
   every rule is scoped under .ap-home. Existing tokens only. */
.ap-app.ap-app--home { grid-template-columns: 248px minmax(0, 1fr); }
.ap-home { display: flex; flex-direction: column; gap: 28px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-home__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-home__block { display: flex; flex-direction: column; gap: 12px; }
.ap-home__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ap-home__block-head .ap-meta { font-variant-numeric: tabular-nums; }
.ap-home__heading { margin: 0; font: 600 20px/1.25 var(--ap-font-serif); letter-spacing: -0.01em; color: var(--ap-warm-ink); }
.ap-home__empty { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-home__empty a, .ap-home__links a, .ap-coverage a, .ap-queue__more a, .ap-home__counts a, .ap-recent__links a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-home__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font: 500 14px/20px var(--ap-font-sans); }
.ap-home__failed { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 16px; border: 1px solid var(--ap-danger-border); border-radius: var(--ap-radius); background: var(--ap-danger-tint); color: var(--ap-danger-700); font: 500 14px/20px var(--ap-font-sans); }
.ap-home__failed svg, .ap-home__warn svg, .ap-home__why svg { flex-shrink: 0; margin-top: 3px; }
.ap-home__why { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); overflow-wrap: anywhere; }
.ap-home__warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-warn-700); }

/* The status line (DESIGN.md Home status line): a parchment slip in three
   columns split by hairlines, Publishing, Autonomy and the Channels, each a
   12px label over its value. A state is its glyph and word in the status
   set's ink, not a pill: the queue below says what needs the member, so
   this stays quiet. Every first line sits on one 32px row, so the values
   line up across the columns. A Channel is a row link: the name in ink,
   the state in a column the rows share (subgrid), a chevron; the row lifts
   to paper with a hairline on hover. Below 600px of its own width the
   Channels drop under the other two. */
.ap-status-line { container-type: inline-size; }
.ap-status-line__list { display: grid; grid-template-columns: 152px 152px minmax(0, 1fr); margin: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); }
.ap-status-line__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 20px; }
.ap-status-line__group + .ap-status-line__group { border-left: 1px solid var(--ap-stone-200); }
.ap-status-line__group dt { font: 500 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
/* The "?" beside Autonomy keeps the label row as tall as its neighbours. */
.ap-status-line__group dt .ap-help-link { margin: -4px 0; }
.ap-status-line__group dd { margin: 0; min-width: 0; }
.ap-status-line__state { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--ap-font-sans); white-space: nowrap; }
.ap-status-line__state svg { flex-shrink: 0; }
.ap-status-line__state--ok { color: var(--ap-ok-700); }
.ap-status-line__state--warn { color: var(--ap-warn-700); }
.ap-status-line__state--danger { color: var(--ap-danger-700); }
.ap-status-line__state--neutral { color: var(--ap-stone-600); }
/* A state that links (Part B spec §5.2: Paused, to Setup → Destination): the same ink, a text link's underline. */
a.ap-status-line__state { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 3px; transition: text-decoration-color 150ms ease-out; }
a.ap-status-line__state:hover { text-decoration-color: currentColor; }
.ap-status-line__value { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-status-line__value, dd > .ap-status-line__state { display: flex; align-items: center; min-height: 32px; font-size: 14px; line-height: 20px; }
dd > a.ap-status-line__state { display: inline-flex; }
.ap-status-line__channels { list-style: none; display: grid; grid-template-columns: minmax(0, max-content) max-content minmax(14px, 1fr); column-gap: 20px; margin: 0 -10px; padding: 0; }
.ap-status-line__channels > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.ap-status-line__channel { box-sizing: border-box; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: var(--ap-radius); color: var(--ap-warm-ink); text-decoration: none; transition: background-color 120ms ease-out, box-shadow 120ms ease-out; }
.ap-status-line__channel:hover { background: var(--ap-paper); box-shadow: inset 0 0 0 1px var(--ap-stone-200); color: var(--ap-warm-ink); }
.ap-status-line__channel:focus-visible { outline-offset: 0; }
.ap-status-line__name { min-width: 0; font: 500 14px/20px var(--ap-font-sans); overflow-wrap: anywhere; }
/* The Channel's kind, and a series' kind in the Series list: a Pill Tag (DESIGN.md) set small enough for a 32px row. */
.ap-status-line__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ap-status-line__kind, .ap-series__kind { padding: 2px 8px; border-radius: var(--ap-radius-pill); background: var(--ap-mist); font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); white-space: nowrap; }
.ap-queue__row:hover .ap-series__kind { background: var(--ap-paper); }
/* A plan row's funnel stage (traffic funnel plan 2, PM14): the same small Pill Tag, under the row's title (the title is a block). */
.ap-badge.ap-series__stage { margin-top: 4px; padding: 2px 8px; border: 0; background: var(--ap-mist); font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-status-line__name--none { grid-column: 1 / 3; color: var(--ap-stone-700); }
.ap-status-line__go { grid-column: 3; justify-self: end; display: inline-flex; color: var(--ap-stone-500); transition: color 120ms ease-out; }
.ap-status-line__go svg { transform: rotate(-90deg); }
.ap-status-line__channel:hover .ap-status-line__go, .ap-status-line__channel:focus-visible .ap-status-line__go { color: var(--ap-warm-ink); }
@container (max-width: 599px) {
	.ap-status-line__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-status-line__group + .ap-status-line__group--channels { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ap-stone-200); }
}
/* Setup → Destination's slip (spec 2026-10-26 Setup overview, SD2): the same slip, each column ending in one quiet line. */
.ap-setup-slip { margin-bottom: 16px; }
.ap-setup-slip__note { display: block; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
/* Pause, Resume and Change: a text link in the ink beside the state or the note. */
.ap-setup-slip__row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 32px; }
.ap-setup-slip__action { font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 3px; transition: text-decoration-color 150ms ease-out; }
.ap-setup-slip__action:hover { text-decoration-color: currentColor; }
.ap-setup-settings { margin-bottom: 16px; }
/* The fold head's one state (SD5): the status line's glyph and word at the handle's size, no pill. */
.ap-channel__state .ap-status-line__state { font-size: 13px; }
/* Touch (DESIGN.md Responsive behavior): each row is a 44px target. */
@media (hover: none), (max-width: 1023px) {
	.ap-status-line__channel { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-status-line__channel, .ap-status-line__go, a.ap-status-line__state { transition: none; }
}

/* Getting started: the help panel's step rows, in a hairline card. */
.ap-home .ap-started { padding: 0 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }

/* Needs you: a paper list in a hairline frame, each row 56px or more with
   16px padding. The dot, title, reason, badge and time read left to right;
   the inline action takes the time's place on hover and on focus. */
.ap-home .ap-queue { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); overflow: hidden; }
.ap-home .ap-queue > li + li { border-top: 1px solid var(--ap-stone-200); }
/* Needs you grouped by kind (hub wayfinding, 2026-10-27): one card per kind
   under a line that counts it, with that kind's "more" link at its right. */
.ap-queue__groups { display: flex; flex-direction: column; gap: 16px; }
.ap-queue__group { display: flex; flex-direction: column; gap: 8px; }
.ap-queue__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; }
.ap-queue__group-title { margin: 0; font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-home .ap-queue__group-head .ap-queue__more { padding: 0; }
.ap-home .ap-queue__row { box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 16px; border: 0; border-radius: 0; color: inherit; transition: background-color 120ms ease-out; }
.ap-home .ap-queue__row:focus-visible { outline-offset: -2px; }
.ap-home .ap-queue__text { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ap-home .ap-queue__title { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-home .ap-queue__why { flex: 1 1 0; min-width: 0; }
.ap-home .ap-queue__age, .ap-home .ap-queue__action { grid-column: 4; grid-row: 1; justify-self: end; }
.ap-home .ap-queue__action { font: 500 13px/1 var(--ap-font-sans); color: var(--ap-warm-ink); opacity: 0; transition: opacity 120ms ease-out; }
.ap-home .ap-queue__row:hover .ap-queue__action, .ap-home .ap-queue__row:focus-visible .ap-queue__action, .ap-home .ap-queue > li:focus-within .ap-queue__action { opacity: 1; }
.ap-home .ap-queue__row:hover .ap-queue__age, .ap-home .ap-queue__row:focus-visible .ap-queue__age, .ap-home .ap-queue > li:focus-within .ap-queue__age { opacity: 0; }
.ap-home .ap-queue__more { margin: 0; padding: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }

/* Next up: the coverage line, then one row per publication. */
.ap-coverage { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-coverage a { font-weight: 500; }
.ap-next { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-next__row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; padding: 12px 16px; }
.ap-next__row + .ap-next__row { border-top: 1px solid var(--ap-stone-200); }
.ap-next__when { font: 500 13px/20px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
.ap-next__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-next__title { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: none; overflow-wrap: anywhere; }
.ap-next__title:hover { text-decoration: underline; }

/* The three tiles: stacked on small screens, a row from 1024px. */
.ap-home__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ap-home__tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-home__tile .ap-home__heading { font: 600 15px/1.3 var(--ap-font-sans); letter-spacing: 0; }
.ap-home__figure { margin: 0; font: 600 18px/1.3 var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ap-home__figure a { color: inherit; text-decoration: none; }
.ap-home__figure a:hover { text-decoration: underline; }
.ap-home__tile .ap-meta { font-variant-numeric: tabular-nums; }
.ap-home__counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font: 400 14px/20px var(--ap-font-sans); }

/* Recent results */
.ap-recent { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-recent__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.ap-recent__row + .ap-recent__row { border-top: 1px solid var(--ap-stone-200); }
.ap-recent__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-recent__title { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-recent__text .ap-meta { font-variant-numeric: tabular-nums; }
.ap-recent__links { display: flex; flex-shrink: 0; gap: 16px; font: 500 13px/18px var(--ap-font-sans); }

@media (min-width: 1024px) {
	.ap-home__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app.ap-app--home { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--home { grid-template-columns: minmax(0, 1fr); }
}
/* Without hover (touch) or on a phone the action has no place to appear, so
   it stays in view under the time. */
@media (hover: none), (max-width: 767px) {
	.ap-home .ap-queue__action { grid-row: 2; opacity: 1; margin-top: 6px; }
	.ap-home .ap-queue__row:hover .ap-queue__age, .ap-home .ap-queue__row:focus-visible .ap-queue__age, .ap-home .ap-queue > li:focus-within .ap-queue__age { opacity: 1; }
}
@media (max-width: 767px) {
	.ap-home .ap-queue__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
	.ap-home .ap-queue__text { flex-direction: column; gap: 2px; }
	.ap-home .ap-queue__title { max-width: none; white-space: normal; }
	.ap-home .ap-queue__why { white-space: normal; }
	.ap-home .ap-queue__row > .ap-badge { grid-column: 2; grid-row: 2; justify-self: start; }
	.ap-home .ap-queue__age, .ap-home .ap-queue__action { grid-column: 3; }
	.ap-next__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.ap-recent__row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-home .ap-queue__row, .ap-home .ap-queue__action { transition: none; }
}

/* Performance chart and sparkline (5c-2): colour lives here, never in the SVG markup. */
.ap-chart { margin: 0; }
.ap-chart__svg { width: 100%; height: auto; display: block; }
.ap-chart__line { stroke: var(--ap-warm-ink); stroke-width: 2; fill: none; stroke-linejoin: round; }
.ap-chart__compare { stroke: var(--ap-stone-500); stroke-width: 2; stroke-dasharray: 4 3; fill: none; stroke-linejoin: round; }
.ap-chart__grid { stroke: var(--ap-stone-200); stroke-width: 1; }
.ap-chart__tick, .ap-chart__name, .ap-chart__series, .ap-chart__hint { font: 500 12px/1 var(--ap-font-sans); fill: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-chart__hint { font-weight: 400; }
.ap-chart__dot { fill: var(--ap-warm-ink); }
.ap-chart__dot--compare { fill: var(--ap-stone-500); }
.ap-spark { width: 168px; height: 32px; }
.ap-spark__path { stroke: var(--ap-warm-ink); stroke-width: 1.5; fill: none; stroke-linejoin: round; }
.ap-spark__dot { fill: var(--ap-warm-ink); }

/* Search performance beside the articles (5c-2, spec §9.3–9.5, ruling
   PM11): the pane's Performance section after the publication, and the
   clicks · impressions pair on the Articles list and Home's Recent
   results, 12px stone-600 tabular figures, right-aligned after the age
   or the time; its labels are hidden text. Existing tokens only. */
.ap-article__perf { display: flex; flex-direction: column; gap: 12px; }
.ap-article__perf > .ap-title, .ap-article__perf > p { margin: 0; }
.ap-article__perf > .ap-btn { align-self: flex-start; }
.ap-article__perf-line { font: 400 15px/22px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-queue__perf, .ap-recent__perf { font: 400 12px/1 var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ap-articles .ap-queue__top > :first-child { margin-right: auto; }
.ap-recent__perf { margin-left: auto; }
/* With the pair, the links take one width on every row (View live is not on
   all of them), so the pairs' right edges line up down the list. */
.ap-recent__perf + .ap-recent__links { min-width: 12.5em; justify-content: flex-end; }
@media (max-width: 767px) {
	.ap-recent__perf { margin-left: 0; }
	.ap-recent__perf + .ap-recent__links { min-width: 0; justify-content: flex-start; }
}

/* Performance page (5c-2, spec §9.2; DESIGN.md Page header, Data table,
   Status badge, Callout): one main column beside the sidebar, as Home.
   The range is a row of pills over native radios, so the GET form works
   without JavaScript; the tables reuse the plan's .ap-plan__table. The
   legend repeats the chart's two strokes (solid and dashed), so the
   comparison never rests on colour alone. Existing tokens only. */
.ap-app.ap-app--performance { grid-template-columns: 248px minmax(0, 1fr); }
.ap-perf { display: flex; flex-direction: column; gap: 28px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-perf__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-perf__head .ap-meta, .ap-perf__totals, .ap-perf__legend { font-variant-numeric: tabular-nums; }
.ap-perf .ap-callout a { color: inherit; text-decoration: underline 1px currentColor; text-underline-offset: 2px; }
.ap-perf__block { display: flex; flex-direction: column; gap: 12px; }
.ap-perf__block-head { display: flex; align-items: center; gap: 8px; }
.ap-perf__range { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; }
.ap-perf__periods { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ap-perf__pill, .ap-picture-choice__option { position: relative; display: inline-flex; }
.ap-perf__pill input, .ap-picture-choice__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ap-perf__pill span, .ap-picture-choice__option span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: var(--ap-paper); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); transition: background-color 120ms ease-out, border-color 120ms ease-out; }
.ap-perf__pill:hover span, .ap-picture-choice__option:hover span { border-color: var(--ap-stone-300); background: var(--ap-mist); }
.ap-perf__pill input:checked + span, .ap-picture-choice__option input:checked + span { border-color: var(--ap-warm-ink); background: var(--ap-warm-ink); color: var(--ap-paper); }
/* The picture dialog's choice (Review) shares these pills.
   The Performance page's chosen period: forced colours drop its ink ground,
   so a thicker system-colour border says which pill is checked. After the
   rule above, so its border-color does not win at the same specificity. */
@media (forced-colors: active) {
	.ap-perf__pill input:checked + span, .ap-picture-choice__option input:checked + span { border: 2px solid Highlight; }
}
.ap-perf__pill input:focus-visible + span, .ap-picture-choice__option input:focus-visible + span { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-perf__compare { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-700); cursor: pointer; }
.ap-perf__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-perf__swatch { display: inline-block; width: 24px; border-top: 2px solid var(--ap-warm-ink); }
.ap-perf__swatch--compare { margin-left: 12px; border-top-style: dashed; border-top-color: var(--ap-stone-500); }
.ap-perf__totals { margin: 0; font: 400 15px/22px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-perf__table th a { color: inherit; text-decoration: none; }
.ap-perf__table th a:hover, .ap-perf__table th[aria-sort] a { color: var(--ap-warm-ink); }
.ap-perf__arrow { margin-left: 4px; }
.ap-perf__title { min-width: 240px; overflow-wrap: anywhere; }
.ap-perf__title a { color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-perf__title .ap-badge { vertical-align: middle; }
.ap-perf__change { min-width: 200px; color: var(--ap-stone-700); }
.ap-perf__more, .ap-perf__none { margin: 0; }
.ap-perf__none { font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-perf__others > summary { cursor: pointer; font: 500 13px/1.3 var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-perf__others[open] > summary { margin-bottom: 12px; }
.ap-perf__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ap-perf__search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ap-perf__contains { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-perf .ap-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 12px; border: 1px solid var(--ap-stone-300); border-radius: var(--ap-radius-pill); background: var(--ap-mist); font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-perf .ap-chip a { color: var(--ap-stone-700); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-perf .ap-setup-list > li { flex-wrap: wrap; }
.ap-perf .ap-setup-list > li > .ap-setup-list__main { flex: 1 1 240px; }
.ap-perf__plan { flex-shrink: 0; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app.ap-app--performance { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--performance { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ap-perf__title { min-width: 180px; }
	.ap-perf__change { min-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-perf__pill span, .ap-picture-choice__option span { transition: none; }
}

/* Social page (Facebook posts plan 1, Task 14; spec §The Social page, first
   form): sidebar 248 · pane fluid, like the Calendar. The "Feed preview":
   each post a paper card drawn as posted (the Page's head, the text as
   written, the picture square and full width, or the link line), with no
   Facebook chrome; under a hairline, the foot row with the kind's Pill Tag,
   the reason line and the small pills. Two columns from 900px of the
   pane's own width, one below. Existing tokens only.
   Plan 2, Task 10, the week proof: the header carries the one filled pill
   (Approve the week), Propose again and Settings; the proof is a section
   titled by its dates in Inter 500 15px with its 13px line, the other weeks
   fold on hairline rows. Approve the week repeats under the proof and sticks
   to the bottom of the screen below 900px. Skip fades a post to 48% in its
   place, with a mist band at full ink saying so and Put back; a pointer
   placeholder is the card with a dashed stone-300 border and no actions. */
.ap-app.ap-app--social { grid-template-columns: 248px minmax(0, 1fr); }
.ap-proof-col > .brxe-authorpilot-social-pane { align-self: stretch; }
.ap-social { display: flex; flex-direction: column; gap: 32px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-social__head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-social__head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; }
.ap-social__head-row > .ap-titlerow { flex: 1 1 320px; min-width: 0; }
.ap-social__head .ap-meta { font-variant-numeric: tabular-nums; }
.ap-social__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-social__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-social__group { display: flex; flex-direction: column; gap: 16px; }
.ap-social__group-head { display: flex; flex-direction: column; gap: 4px; }
/* Two columns from 900px of page (2 × 442 + 16), one below. Not a container query: a size container in the
   phone's one-column grid made the page about three times its content's height. */
.ap-social__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 442px), 1fr)); gap: 20px 16px; align-items: start; }
.ap-social__week { border-top: 1px solid var(--ap-stone-200); }
.ap-social__week:last-child { border-bottom: 1px solid var(--ap-stone-200); }
.ap-social__week-head { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; cursor: pointer; list-style: none; border-radius: var(--ap-radius); }
.ap-social__week-head::-webkit-details-marker { display: none; }
.ap-social__week-title { font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-social__week-count { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-social__chev { display: inline-flex; margin-left: auto; color: var(--ap-stone-500); transition: transform 120ms ease-out, color 120ms ease-out; }
.ap-social__week[open] .ap-social__chev { transform: rotate(180deg); }
.ap-social__week-head:hover .ap-social__chev, .ap-social__week-head:focus-visible .ap-social__chev { color: var(--ap-warm-ink); }
.ap-social__weeks { display: flex; flex-direction: column; }
.ap-social__week-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 24px; }
.ap-social__week-count { overflow-wrap: anywhere; }

.ap-social-week { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.ap-social-week__head { display: flex; flex-direction: column; gap: 4px; }
.ap-social-week__title { margin: 0; font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); font-variant-numeric: tabular-nums; }
.ap-social-week__line { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-social-week__held { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ap-social-week__held li { display: flex; align-items: flex-start; gap: 6px; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-social-week__held svg { flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; color: var(--ap-stone-500); }
.ap-social-week__stopped { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-warn-700); }
.ap-social-week__stopped svg { flex-shrink: 0; width: 12px; height: 12px; margin-top: 3px; }
.ap-social-week__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ap-social-week__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.ap-social-week__form .ap-help { flex: 1 1 240px; }
.ap-social__week .ap-social-week__bar { padding-top: 4px; }
.ap-social__empty { padding-top: 24px; }

.ap-social-post { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); scroll-margin-top: 16px; }
.ap-social-post__frame { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ap-social-post__frame:has(> .ap-social-post__picture:last-child, > .ap-social-post__link:last-child) { padding-bottom: 0; }
.ap-social-post__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ap-social-post__head > .ap-badge { align-self: start; }
.ap-social-post__who { display: flex; flex-direction: column; min-width: 0; }
.ap-social-post__page { font: 600 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-social-post__moment { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-500); font-variant-numeric: tabular-nums; }
.ap-social-post__text { margin: 0; max-width: 60ch; font: 400 15px/1.5 var(--ap-font-sans); color: var(--ap-warm-ink); white-space: pre-line; overflow-wrap: anywhere; }
.ap-social-post__picture { display: block; width: calc(100% + 32px); max-width: none; height: auto; margin: 0 -16px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--ap-mist); }
.ap-social-post__link { display: flex; flex-direction: column; gap: 2px; margin: 0 -16px; padding: 10px 16px 12px; border-top: 1px solid var(--ap-stone-200); background: var(--ap-parchment); }
.ap-social-post__host { font: 400 12px/16px var(--ap-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-stone-500); overflow-wrap: anywhere; }
.ap-social-post__link-line { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-social-post__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 12px 16px; border-top: 1px solid var(--ap-stone-200); }
.ap-social-post__about { display: flex; flex: 1 1 200px; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ap-social-post__kind { padding: 2px 8px; border-radius: var(--ap-radius-pill); background: var(--ap-mist); font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); white-space: nowrap; }
.ap-social-post__reason { flex: 1 1 100%; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); text-wrap: pretty; }
.ap-social-post__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.ap-social-post__actions .ap-btn { height: 28px; padding: 0 12px; font-size: 13px; }
.ap-social-post__form { display: flex; margin: 0; }
.ap-social-post__remote { font-size: 13px; line-height: 18px; margin-right: 4px; }
/* Skip fades what would go out, never the band that says so. */
/* A skipped post greys its picture and inks its words in stone-600: fading the words with opacity read under 4.5:1. */
.ap-social-post.is-skipped :is(.ap-social-post__picture, .ap-facebook__avatar) { opacity: 0.48; }
.ap-social-post.is-skipped :is(.ap-social-post__page, .ap-social-post__text) { color: var(--ap-stone-600); }
.ap-social-post__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 -16px; padding: 8px 16px; background: var(--ap-mist); font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-social-post__band .ap-social-post__form { display: inline-flex; }
.ap-social-post__put-back { padding: 0; border: 0; background: none; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); text-decoration: underline 1px var(--ap-stone-400); text-underline-offset: 3px; cursor: pointer; }
.ap-social-post__put-back:hover { text-decoration-color: currentColor; }
.ap-social-post__put-back:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; border-radius: 2px; }
.ap-social-post--placeholder { border-style: dashed; border-color: var(--ap-stone-300); background: var(--ap-paper); }
.ap-social-post__text--planned { color: var(--ap-stone-600); }
/* Plan 3: a post whose picture is being made is the dashed card; its text stays at full ink, its picture's place a mist square with one plain line (no spinner). */
.ap-social-post.is-pending { border-style: dashed; border-color: var(--ap-stone-300); }
.ap-social-post__waiting { display: grid; place-items: center; margin: 0 -16px; padding: 16px; aspect-ratio: 1 / 1; background: var(--ap-mist); }
.ap-social-post__waiting p { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); text-align: center; text-wrap: balance; }
.ap-social-post__frame:has(> .ap-social-post__waiting:last-child) { padding-bottom: 0; }
/* Edit's picture part: the picture now at 240px, the ghost pills under it, one line, then the words on the picture. */
.ap-social-picture { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ap-social-picture__now { display: block; width: 240px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ap-radius); background: var(--ap-mist); }
.ap-social-picture__pills { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; padding-top: 4px; }
.ap-social-picture__pills > .ap-field { width: 100%; }
.ap-social-picture__line { margin: 0; text-wrap: pretty; }
.ap-social-words__lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ap-social-words > .ap-help { margin: 0; }
.ap-social-post:target { border-color: var(--ap-stone-300); box-shadow: 0 0 0 1px var(--ap-stone-300); }
.ap-social-edit textarea.ap-input { field-sizing: content; min-height: 88px; max-height: calc(8lh + 22px); }
.ap-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-social-edit input[type="file"].ap-input { display: flex; align-items: center; padding: 6px 12px; font-size: 13px; color: var(--ap-stone-700); }
.ap-social-edit input[type="file"]::file-selector-button { margin-right: 12px; height: 28px; padding: 0 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius-pill); background: transparent; font: 500 13px/1 var(--ap-font-sans); color: var(--ap-stone-700); cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ap-social-edit input[type="file"]::file-selector-button:hover { background: var(--ap-mist); border-color: var(--ap-stone-300); }
.ap-social__empty p { text-wrap: balance; }
.ap-social__week-head:hover .ap-social__week-title { text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 3px; }
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app.ap-app--social { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--social { grid-template-columns: minmax(0, 1fr); }
	.ap-social-post__actions .ap-btn { height: 44px; padding: 0 16px; font-size: 14px; }
	.ap-social-post__put-back { min-height: 44px; }
}
/* Below 900px Approve the week sticks to the bottom of the screen under the proof, as the review's approve bar. */
@media (max-width: 899px) {
	.ap-social-week__bar--proof { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px; border-top: 1px solid var(--ap-stone-200); background: var(--ap-paper); }
	.ap-social-week__bar--proof .ap-help { display: none; }
	.ap-social-week__bar--proof .ap-btn { flex: 1 1 auto; height: 44px; }
	.ap-social-week__bar--proof .ap-social-week__form { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-social__chev { transition: none; }
}

/* Traffic funnel page (traffic funnel §The page; DESIGN.md Page header,
   Status badge, Callout, Empty state): one main column beside the
   sidebar, as Performance. Four stage cards in a grid, two under 1024px
   and one under 720px, in stage order. The bar is the share of published
   articles: a mist track, a charcoal fill and a warm-ink tick at the
   target, with the same in words for a screen reader, so the bar never
   rests on colour alone. A stage off target gets a stone-300 border and
   the Needs-you pill; Ember appears nowhere else. The note is advice, not
   a demand: paper with a warm-ink rule, never Ember. Existing tokens only. */
.ap-app.ap-app--funnel { grid-template-columns: 248px minmax(0, 1fr); }
/* Stretch like the other panes: without it the flow view shrinks to its content and the header moves when the view switches. */
.ap-proof-col > .brxe-authorpilot-funnel-pane { align-self: stretch; }
.ap-funnel { display: flex; flex-direction: column; gap: 28px; max-width: var(--ap-page-wide); padding-bottom: 40px; }
.ap-funnel__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--ap-stone-200); }
.ap-funnel__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ap-funnel__head .ap-meta { font-variant-numeric: tabular-nums; }
.ap-funnel__head .ap-meta a, .ap-funnel .ap-callout a { color: inherit; text-decoration: underline 1px currentColor; text-underline-offset: 2px; }
.ap-funnel__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-funnel__switch { display: inline-flex; gap: 4px; }
.ap-funnel__switch .ap-btn { height: 32px; padding: 0 14px; font-size: 13px; }
.ap-funnel__switch .ap-btn[aria-current] { border-color: var(--ap-warm-ink); background: var(--ap-warm-ink); color: var(--ap-paper); }
.ap-funnel__switch .ap-btn:focus-visible, .ap-funnel__card:focus-visible, .ap-funnel__more:focus-visible { outline: 2px solid var(--ap-warm-ink); outline-offset: 2px; }
.ap-funnel__ask { margin: 0; }
.ap-funnel__quiet { display: flex; flex-direction: column; gap: 4px; }
.ap-funnel__quiet p { margin: 0; font: 400 14px/20px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-funnel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ap-funnel__stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-funnel__stage--off { border-color: var(--ap-stone-300); }
.ap-funnel__stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.ap-funnel__word { margin: 0; font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-funnel__stage-head .ap-badge { font-variant-numeric: tabular-nums; }
.ap-funnel__bar { position: relative; height: 6px; border-radius: var(--ap-radius-pill); background: var(--ap-mist); }
.ap-funnel__bar i { position: absolute; inset: 0 auto 0 0; max-width: 100%; border-radius: var(--ap-radius-pill); background: var(--ap-charcoal); }
.ap-funnel__bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ap-warm-ink); }
.ap-funnel__counts { margin: 0; font: 400 12px/1.4 var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-funnel__cards { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ap-funnel__card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); text-decoration: none; transition: border-color 120ms ease-out; }
.ap-funnel__card:hover { border-color: var(--ap-stone-300); }
.ap-funnel__card-title { font: 500 13px/18px var(--ap-font-sans); color: var(--ap-warm-ink); overflow-wrap: anywhere; }
.ap-funnel__card-meta { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-funnel__card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-funnel__card-tags .ap-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ap-funnel__more { align-self: flex-start; font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; font-variant-numeric: tabular-nums; }
.ap-funnel__more:hover { color: var(--ap-warm-ink); }
.ap-funnel__no-offer { margin: 0; padding: 8px 10px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-funnel__aside { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-funnel__note { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ap-stone-200); border-left: 3px solid var(--ap-warm-ink); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-funnel__note p { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); font-variant-numeric: tabular-nums; }
/* The stage box on a page a Funnel remedy opened (spec 2026-10-25 H1): the note slip's advice style, never Ember. */
.ap-stage-box { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--ap-stone-200); border-left: 3px solid var(--ap-warm-ink); border-radius: var(--ap-radius); background: var(--ap-paper); }
.ap-stage-box p { margin: 0; }
.ap-stage-box__title { font: 500 15px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-stage-box__line { font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ap-stage-box__back { color: var(--ap-stone-600); text-decoration: underline 1px var(--ap-stone-300); text-underline-offset: 2px; }
.ap-stage-box__back:hover { color: var(--ap-warm-ink); }
.ap-stage-box__extra { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }

/* New article's ideas for a stage (spec 2026-10-25 H2). */
.ap-stage-ideas { display: flex; flex-direction: column; gap: 8px; }
.ap-stage-ideas__title { margin: 0; font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-stage-ideas__source { font-weight: 400; color: var(--ap-stone-600); }
.ap-stage-ideas__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ap-stage-ideas__card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ap-stone-200); border-radius: var(--ap-radius); background: var(--ap-parchment); }
.ap-stage-ideas__card.is-using { border-color: var(--ap-stone-300); }
.ap-stage-ideas__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-stage-ideas__text p { margin: 0; overflow-wrap: anywhere; }
.ap-stage-ideas__name { font: 500 14px/20px var(--ap-font-sans); color: var(--ap-warm-ink); }
.ap-stage-ideas__why, .ap-stage-ideas__help { font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-stage-ideas__using { font: 500 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); white-space: nowrap; }
.ap-stage-ideas .ap-btn { height: 32px; padding: 0 12px; font-size: 13px; flex-shrink: 0; }
.ap-stage-ideas > .ap-link { align-self: flex-start; }
.ap-stage-ideas__empty { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-stage-ideas__new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
@media (max-width: 719px) { .ap-stage-ideas__card { flex-direction: column; align-items: flex-start; } }
.ap-funnel__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-funnel__actions .ap-btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ap-funnel__not-now { margin: 0; }
/* The fox's suggested card: a suggestion's dashed stone-300 border (DESIGN.md), never the note's warm-ink rule. */
.ap-funnel__fox { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px dashed var(--ap-stone-300); border-radius: var(--ap-radius); background: var(--ap-paper); }
/* In a four-column stage the badge is wider than the card: it wraps inside rather than running past the border. */
.ap-funnel__fox > .ap-badge { align-self: flex-start; max-width: 100%; white-space: normal; text-wrap: balance; }
.ap-funnel__fox p, .ap-funnel__whys li { margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-700); }
.ap-funnel__whys { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ap-funnel__whys li span { font-weight: 500; color: var(--ap-warm-ink); }
.ap-funnel__flow { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ap-funnel__svg { width: 100%; height: auto; display: block; }
.ap-funnel__band { fill: var(--ap-mist); }
.ap-funnel__target { fill: none; stroke: var(--ap-stone-300); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ap-funnel__path { fill: none; stroke: var(--ap-stone-400); stroke-width: 1.5; stroke-linejoin: round; }
.ap-funnel__dot { fill: var(--ap-charcoal); }
.ap-funnel__dot--series { stroke: var(--ap-paper); stroke-width: 2; }
.ap-funnel__band-word { font: 500 15px/1 var(--ap-font-sans); fill: var(--ap-charcoal); }
.ap-funnel__band-line, .ap-funnel__total { font: 400 12px/1 var(--ap-font-sans); fill: var(--ap-stone-600); font-variant-numeric: tabular-nums; }
.ap-funnel__label { font: 500 12px/1 var(--ap-font-sans); fill: var(--ap-charcoal); paint-order: stroke; stroke: var(--ap-paper); stroke-width: 3px; stroke-linejoin: round; }
.ap-funnel__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font: 400 12px/16px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-funnel__legend li { display: inline-flex; align-items: center; gap: 6px; }
.ap-funnel__key { flex: none; width: 24px; height: 16px; }
.ap-funnel__cuts { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ap-funnel__cut { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font: 400 13px/18px var(--ap-font-sans); color: var(--ap-stone-600); }
.ap-funnel__slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.ap-funnel__slip { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 1408px) and (max-width: 1663px) {
	body.ap-assistant-open .ap-app.ap-app--funnel { grid-template-columns: 248px minmax(0, 1fr); }
}
@media (max-width: 1024px) {
	.ap-funnel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.ap-app.ap-app--funnel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.ap-funnel__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
	.ap-funnel__switch .ap-btn[aria-current] { border: 2px solid Highlight; }
	.ap-funnel__bar { border: 1px solid CanvasText; }
	.ap-funnel__bar i, .ap-funnel__bar u { background: CanvasText; }
	.ap-funnel__band { fill: Canvas; stroke: CanvasText; stroke-width: 1; }
	.ap-funnel__target, .ap-funnel__path { stroke: CanvasText; }
	.ap-funnel__dot, .ap-funnel__band-word, .ap-funnel__band-line, .ap-funnel__total, .ap-funnel__label { fill: CanvasText; }
	.ap-funnel__dot--series, .ap-funnel__label { stroke: Canvas; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-funnel__card { transition: none; }
}

/* Touch targets below 1024px (DESIGN.md App shell → Phones and small tablets, and Responsive behavior → Touch): 44px for the shell's controls. Last in the file, so it wins over each control's own height above. */
@media (max-width: 1023px) {
	.ap-switcher > summary { height: 44px; }
	.ap-switcher__site { min-height: 44px; box-sizing: border-box; }
	.ap-nav__item { height: 44px; }
	.ap-nav__fold > summary { min-height: 44px; box-sizing: border-box; }
	.ap-assistant-launcher { height: 44px; }
	.ap-nav__bell { height: 44px; }
	.ap-nav__signout { height: 44px; }
	.ap-nav__me { min-height: 56px; }
	.ap-zone__button { height: 44px; }
}