/* ════════════════════════════════════════════════
   Prism — Help / documentation
   help.css

   Loaded only by /help and /help/*. Built entirely from the tokens in
   styles.css; the one addition is --doc-measure.

   Structure follows the measured Linear docs anatomy: three columns, a
   heading rhythm of 56px above / 12px below an h2 (h3: 32/6), one neutral
   callout with no severity colours, borderless tables but for a header rule,
   and an article footer that is previous/next and nothing else.

   Scope note: never nest docs markup inside .pp-bento-sec, .wf-flow-sec or
   .wf-caps-sec — those scopes redefine --n100/200/300 with other values.
   ════════════════════════════════════════════════ */

:root {
  --doc-measure: 72ch;      /* long-form reading width; the site's ch discipline */
  --doc-side: 296px;        /* the full-height rail, OUTSIDE the site column */
  --doc-toc: 232px;
}

/* ── Shell ──────────────────────────────────────── */
/* Linear's arrangement: a fixed-width rail flush to the left edge, full height,
   with the article to its right. The rail is STICKY inside .doc, not fixed to
   the viewport, so it stops where the article stops and never runs under the
   footer. */
:root { --doc-side: 300px; }
/* ════════════════════════════════════════════════
   DOCS BAR — one row, and it belongs to the docs
   Linear's composition: identity + search in the sidebar column, breadcrumb and
   the app link in the content column, and the column divider running the full
   height of the bar so the two columns read from the very top. The marketing
   nav is deliberately absent: a reader here wants the product or the search
   box, not the pricing page.
   ════════════════════════════════════════════════ */
:root { --nav-h: 72px; }          /* roomier than the marketing nav's 64 */

.docs-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h); display: flex; align-items: stretch;
  background: var(--bg); border-bottom: 1px solid var(--line-strong);
}
.docs-bar__ident {
  width: var(--doc-side); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px 0 40px;         /* matches .doc-side, so the mark sits over the tree */
  border-right: 1px solid var(--line-strong);
}
.docs-bar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--n900); text-decoration: none;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
}
.docs-bar__brand svg { width: 22px; height: 22px; flex: 0 0 auto; }
.docs-bar__rule { width: 1px; height: 16px; background: var(--n300); flex: 0 0 auto; }
.docs-bar__search {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  background: none; border: 0; border-radius: 50%;
  color: var(--n600); cursor: pointer; padding: 0;
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.docs-bar__search:hover { background: var(--n100); color: var(--n900); }
.docs-bar__search svg { width: 14px; height: 14px; }

.docs-bar__rest {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-left: var(--doc-inset);
  padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.docs-bar__crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--n600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-bar__crumbs a { color: var(--n600); text-decoration: none; }
.docs-bar__crumbs a:hover { color: var(--p800); }
.docs-bar__crumbs span[aria-hidden] { margin: 0 8px; color: var(--n400); }
.docs-bar__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.docs-bar__site {
  font-size: 13.5px; color: var(--n600); text-decoration: none;
  transition: color .15s var(--ease-out);
}
.docs-bar__site:hover { color: var(--n900); }
.docs-bar__app {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  background: var(--n900); color: var(--bg); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: opacity .15s var(--ease-out);
}
.docs-bar__app:hover { opacity: .88; }

/* DOCS BAR — below the sidebar line. The identity column is sized to sit over
   the 300px tree; once the tree collapses (900px) that width is dead space and
   pushed Open App off a phone screen entirely. Let the identity size to its
   content, drop the column divider and the breadcrumb, keep both links. */
@media (max-width: 900px) {
  .docs-bar__ident { width: auto; flex: 1 1 auto; min-width: 0; border-right: 0;
                     padding: 0 12px 0 var(--gutter); }
  .docs-bar__rest { flex: 0 0 auto; padding-left: 0; padding-right: var(--gutter); }
  .docs-bar__crumbs { display: none; }
  /* As on the marketing pages, the header CTA moves into the drawer here. */
  .docs-bar__site, .docs-bar__app { display: none; }
}
@media (max-width: 560px) {
  .docs-bar__actions { gap: 14px; }
  .docs-bar__app { height: 32px; padding: 0 13px; }
}

/* MOBILE DRAWER — the marketing site's .nav-mobile panel (styles.css) with the
   docs tree inside, so menu behaviour and motion match the rest of the site.
   The tree keeps its desktop look — room rails, open section, current page —
   at a touch-friendly size. */
.docs-drawer__tree { padding-bottom: 12px; border-bottom: 1px solid rgba(23, 24, 26, 0.06); }
.docs-drawer .doc-side__group { margin-bottom: 4px; }
.docs-drawer .doc-side__cat { font-size: 16px; padding: 10px 0; }
.docs-drawer .doc-side__link { font-size: 15px; padding: 7px 0; }

.doc { min-height: calc(100vh - var(--nav-h)); }
.doc__grid {
  display: grid;
  grid-template-columns: var(--doc-side) minmax(0, 1fr) var(--doc-toc);
  column-gap: 0;
  align-items: start;
  /* The rail is flush left at a fixed width; the ARTICLE still sits on the site
     column. --doc-inset is how far past the rail the content has to start to
     land on the same x as the H1 on every other Prism page. Where the rail is
     wider than that margin (below ~1728px) it falls back to one gutter. */
  padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
:root {
  --doc-inset: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter) - var(--doc-side)));
}
.doc__grid--home { grid-template-columns: var(--doc-side) minmax(0, 1fr); }

/* ── Sidebar ────────────────────────────────────── */
.doc-side {
  /* Sticky, not fixed. Fixed would pin the rail to the viewport for the whole
     page, so it would sit on top of the footer -- the footer runs full width
     and the rail has to release before it. Sticky does exactly that: it holds
     while you are in the article and lets go as the article ends. The rail
     scrolls internally when the tree is taller than the space it has. */
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 24px 24px 40px 40px;
  border-right: 1px solid var(--line-strong);
  background: var(--bg);
}

.doc-side__group {
  padding-left: 12px; border-left: 2px solid var(--n200);
  margin-bottom: 2px;
}
/* The rail is coloured by the room the section documents, in the order the
   product is used: Home, Project Library, Writers Room, Editing Suite, the
   brief's styles, then Distribution. Where two sections belong to the same
   room they take two tones of that room's family — the 500 for the room
   itself, and a deeper stop mixed from the family's own 500 and 900 for the
   section that sits inside it. Both ends of every mix are Figma tokens, so
   nothing here is an invented colour. Account and Reference are not rooms and
   stay neutral. */
.doc-side__group[data-room="home"]    { border-left-color: var(--rm-home-500); }
.doc-side__group[data-room="pl"]      { border-left-color: var(--rm-pl-500); }
.doc-side__group[data-room="pl-deep"] { border-left-color: color-mix(in oklab, var(--rm-pl-500) 55%, var(--rm-pl-900)); }
.doc-side__group[data-room="wr"]      { border-left-color: var(--rm-wr-500); }
.doc-side__group[data-room="wr-deep"] { border-left-color: color-mix(in oklab, var(--rm-wr-500) 55%, var(--rm-wr-900)); }
.doc-side__group[data-room="es"]      { border-left-color: var(--rm-es-500); }
.doc-side__group[data-room="es-deep"] { border-left-color: color-mix(in oklab, var(--rm-es-500) 55%, var(--rm-es-900)); }
.doc-side__group[data-room="br"]      { border-left-color: var(--rm-br-500); }
[data-room="br-deep"] { border-left-color: color-mix(in oklab, var(--rm-br-500) 55%, var(--rm-br-900)); }
[data-room="vb"]      { border-left-color: var(--rm-vb-500); }
.doc-side__group[data-room="dr"]      { border-left-color: var(--rm-dr-500); }
.doc-side__group[data-room="neutral"] { border-left-color: var(--n300); }

.doc-side__cat {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--n600); padding: 6px 0; cursor: pointer; list-style: none;
  transition: color .15s var(--ease-out);
}
.doc-side__cat::-webkit-details-marker { display: none; }
.doc-side__cat:hover,
.doc-side__group[open] > .doc-side__cat { color: var(--n900); }
.doc-side__chev {
  width: 9px; height: 9px; flex: 0 0 auto; color: var(--n500);
  transition: transform .18s var(--ease-out);
}
.doc-side__group[open] > .doc-side__cat > .doc-side__chev { transform: rotate(90deg); }

/* Opening and closing.
   Same idiom as the site's workflows dropdown -- a short curve on our own
   --ease-out, opacity, and a small lift so the links arrive rather than appear.
   The difference here is that the group pushes the tree below it, so the height
   has to interpolate too: interpolate-size lets block-size animate to auto, and
   allow-discrete keeps content-visibility in step so the close is not cut off
   halfway. Scoped to the rail, not :root, so no other auto-height on the page
   changes behaviour. Firefox has no ::details-content yet and snaps open, which
   is exactly the behaviour we ship today. */
.doc-side { interpolate-size: allow-keywords; }

.doc-side__group::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    block-size .26s var(--ease-out),
    opacity .18s var(--ease-out),
    transform .26s var(--ease-out),
    content-visibility .26s allow-discrete;
}
.doc-side__group[open]::details-content {
  block-size: auto;
  opacity: 1;
  transform: translateY(0);
}

.doc-side__link {
  display: block; font-size: 13px; line-height: 1.5;
  color: var(--n600); text-decoration: none; padding: 3px 0;
  transition: color .15s var(--ease-out);
}
.doc-side__link:hover { color: var(--n900); }
.doc-side__link.is-here { color: var(--n900); font-weight: 500; }
.doc-side__group > .doc-side__link:last-child { margin-bottom: 8px; }

.doc-side__foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--n200); }
.doc-side__foot a {
  display: block; font-size: 13px; color: var(--n600);
  text-decoration: none; padding: 3px 0;
}
.doc-side__foot a:hover { color: var(--p800); }

/* ── Article ────────────────────────────────────── */
.doc__body {
  max-width: var(--doc-measure); min-width: 0;
  margin-left: var(--doc-inset);
  padding: calc(var(--nav-h) + 72px) 0 120px;
}
.doc__title {
  font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 400;
  letter-spacing: -.03em; line-height: 1.12; color: var(--n900); margin-bottom: 18px;
}
.doc__lede { font-size: 18px; line-height: 1.65; color: var(--n700); margin-bottom: 28px; text-wrap: pretty; }

.doc__h2 {
  font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: var(--n900);
  margin: 72px 0 18px;                    /* the 4:1 rhythm, on the site's scale */
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.doc__h3 {
  font-size: 16px; font-weight: 600; color: var(--n800);
  margin: 42px 0 10px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.doc__p { font-size: 16px; line-height: 1.8; color: var(--n700); margin-bottom: 20px; text-wrap: pretty; }
.doc__ul, .doc__ol { margin: 0 0 22px; padding-left: 24px; }
.doc__ul li, .doc__ol li {
  font-size: 16px; line-height: 1.75; color: var(--n700); margin-bottom: 9px;
}
.doc__body a { color: var(--p800); text-decoration: underline; text-underline-offset: 2px; }
.doc__body a:hover { color: var(--n900); }

kbd {
  font-family: var(--mono); font-feature-settings: 'zero' 1;
  font-size: 12px; font-weight: 500; color: var(--n800);
  background: var(--n100); border: 1px solid var(--n300);
  border-radius: 4px; padding: 1.5px 5px; white-space: nowrap;
}

/* One neutral callout, marked with the Prism glyph. No severity colours. */
.doc__note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--n100); border: 1px solid var(--n200);
  border-radius: 10px; padding: 16px 18px; margin: 24px 0;
}
.doc__note-mark {
  width: 17px; height: 17px; flex: 0 0 auto;
  margin-top: 2px; color: var(--p700);
}
.doc__note p { font-size: 14.5px; line-height: 1.65; color: var(--n700); margin: 0; }
.doc__note strong { color: var(--n900); }

/* ── FAQ accordion ──────────────────────────────── */
.doc-faq { border-top: 1px solid var(--n200); margin-top: 8px; }
.doc-faq__row { border-bottom: 1px solid var(--n200); }
.doc-faq__q {
  display: flex; align-items: center; gap: 12px;
  font-size: 15.5px; font-weight: 500; color: var(--n900);
  padding: 16px 0; cursor: pointer; list-style: none;
}
.doc-faq__q::-webkit-details-marker { display: none; }
.doc-faq__chev {
  width: 10px; height: 10px; flex: 0 0 auto; order: -1; color: var(--n500);
  transition: transform .18s var(--ease-out);
}
.doc-faq__row[open] > .doc-faq__q > .doc-faq__chev { transform: rotate(90deg); }

/* Same recipe as the rail's groups: the answer's own height interpolates, so
   the rows below it move with it instead of snapping. No lift here -- a
   translate would slide the answer under the row's own rule. */
.doc-faq { interpolate-size: allow-keywords; }
.doc-faq__row::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size .24s var(--ease-out),
    opacity .16s var(--ease-out),
    content-visibility .24s allow-discrete;
}
.doc-faq__row[open]::details-content { block-size: auto; opacity: 1; }
.doc-faq__a { padding: 0 0 16px 22px; }
.doc-faq__a .doc__p:last-child { margin-bottom: 0; }

.doc__tablewrap { overflow-x: auto; margin: 22px 0; }
.doc__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc__table th {
  text-align: left; font-weight: 600; color: var(--n900);
  padding: 0 16px 8px 0; border-bottom: 1px solid var(--n300); white-space: nowrap;
}
.doc__table td {
  padding: 9px 16px 9px 0; color: var(--n700);
  line-height: 1.6; vertical-align: top;
}

/* ── Previous / next ────────────────────────────── */
.doc-seq {
  display: flex; gap: 16px; margin-top: 64px;
  padding-top: 24px; border-top: 1px solid var(--n200);
}
.doc-seq a {
  flex: 1; text-decoration: none; padding: 14px 18px;
  border: 1px solid var(--n200); border-radius: 12px;
  font-size: 14.5px; font-weight: 500; color: var(--n900);
  transition: border-color .15s var(--ease-out);
}
.doc-seq a:hover { border-color: var(--n400); color: var(--n900); }
.doc-seq a span {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--n600); margin-bottom: 4px;
}
.doc-seq__next { text-align: right; }

/* ── On this page ───────────────────────────────── */
.doc-toc {
  padding-left: var(--head-gap);
  position: sticky; top: calc(var(--nav-h) + 32px);
  max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto;
  scrollbar-width: thin;
  margin-top: calc(var(--nav-h) + 72px);
}
.doc-toc__title {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--n600); margin-bottom: 12px;
}
.doc-toc a {
  display: block; font-size: 13px; line-height: 1.45; color: var(--n600);
  text-decoration: none; padding: 5px 0;
}
.doc-toc a:hover { color: var(--n900); }
/* the section you are reading — colour only, so nothing reflows as you scroll */
.doc-toc a.is-active { color: var(--n900); }

/* ── Landing ────────────────────────────────────── */
.doc-home__main { min-width: 0; margin-left: var(--doc-inset); padding: calc(var(--nav-h) + 72px) 0 120px; }
.doc-home__head { margin-bottom: var(--head-gap); }
.doc-home__title {
  font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 400;
  letter-spacing: -.03em; line-height: 1.1; color: var(--n900); margin-bottom: 12px;
}
.doc-home__lede {
  font-size: 19px; line-height: 1.65; color: var(--n700); max-width: 52ch;
  margin-bottom: var(--head-gap);
}

.doc-home__sec { margin-bottom: var(--sec-pad); }
.doc-home__sec-title {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  color: var(--n900); margin-bottom: 26px;
}
.doc-home__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* One card per article: an icon field, then title, then a single line of
   description. The sidebar carries the full tree, so cards do not repeat it. */
.doc-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--n200); border-radius: 12px;
  text-decoration: none; overflow: hidden;
  transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.doc-card:hover { border-color: var(--n400); transform: translateY(-1px); }
.doc-card__art {
  display: block; aspect-ratio: 16 / 10; padding: 22px 24px;
  background: var(--n50); border-bottom: 1px solid var(--n200); color: var(--n600);
}
/* Art panel: the room's 100 as the ground, its 500 as the glyph. The 500 stop is
   what carries the identity — a 100-on-100 wash reads as no colour at all. */
.doc-card[data-room="home"]      .doc-card__art { background: var(--rm-home-100);      color: var(--rm-home-500); }
.doc-card[data-room="pl"]        .doc-card__art { background: var(--rm-pl-100);        color: var(--rm-pl-500); }
.doc-card[data-room="footage"]   .doc-card__art { background: var(--ct-footage-100);   color: var(--ct-footage-500); }
.doc-card[data-room="wr"]        .doc-card__art { background: var(--rm-wr-100);        color: var(--rm-wr-500); }
.doc-card[data-room="presenter"] .doc-card__art { background: var(--ct-presenter-100); color: var(--ct-presenter-500); }
.doc-card[data-room="es"]        .doc-card__art { background: var(--rm-es-100);        color: var(--rm-es-500); }
.doc-card[data-room="captions"]  .doc-card__art { background: var(--ct-captions-100);  color: var(--ct-captions-500); }
.doc-card[data-room="br"]        .doc-card__art { background: var(--rm-br-100);        color: var(--rm-br-500); }
.doc-card[data-room="br-deep"]   .doc-card__art { background: var(--rm-br-100);        color: var(--rm-br-900); }
.doc-card[data-room="vb"]        .doc-card__art { background: var(--rm-vb-100);        color: var(--rm-vb-500); }
.doc-card[data-room="dr"]        .doc-card__art { background: var(--rm-dr-100);        color: var(--rm-dr-500); }
.doc-card[data-room="neutral"]   .doc-card__art { background: var(--n100);             color: var(--n500); }
.doc-card__icon { width: 22px; height: 22px; }
.doc-card__title {
  display: block; font-size: 15px; font-weight: 500; color: var(--n900);
  padding: 20px 24px 0;
}
.doc-card__desc {
  display: block; font-size: 13.5px; line-height: 1.55; color: var(--n600);
  padding: 7px 24px 22px;
}
.doc-home__foot { margin-top: 8px; font-size: 14.5px; color: var(--n600); }
.doc-home__foot a { color: var(--p800); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1180px) {
  .doc__grid { grid-template-columns: var(--doc-side) minmax(0, 1fr); }
  .doc-home__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-toc { display: none; }        /* contents fold first, as Linear does */
}
@media (max-width: 900px) {          /* the site's real mobile line — nav flips here */
  .doc__grid, .doc__grid--home { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .doc__body, .doc-home__main { margin-left: 0; padding: calc(var(--nav-h) + 24px) var(--gutter) 80px; }
  /* The in-page tree gives way to the drawer behind the menu button. */
  .doc-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-side { display: none; }
  .doc-seq { flex-direction: column; }
  .doc-seq__next { text-align: left; }
}

@media (max-width: 560px) {
  .doc-home__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .doc-side__link, .doc-seq a { transition: none; }
}


/* ── Search overlay ─────────────────────────────── */
.help-search {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: start center; padding: 12vh 20px 20px;
}
/* display:grid above beats the UA rule for [hidden], so restate it. */
.help-search[hidden] { display: none; }
.help-search__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 12, 16, .38); backdrop-filter: blur(2px);
}
.help-search__panel {
  position: relative; width: 100%; max-width: 560px;
  background: #fff; border: 1px solid var(--n300); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(10, 12, 16, .18);
  overflow: hidden;
}
.help-search__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--n200); color: var(--n500);
}
.help-search__bar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.help-search__input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--sans); font-size: 16px; color: var(--n900);
}
.help-search__input::placeholder { color: var(--n500); }
.help-search__input::-webkit-search-cancel-button { display: none; }
.help-search__esc {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--n600); background: var(--n100); border: 1px solid var(--n300);
  border-radius: 5px; padding: 3px 7px; cursor: pointer;
}
.help-search__esc:hover { color: var(--n900); border-color: var(--n500); }

.help-search__results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.help-search__hint { font-size: 13.5px; color: var(--n600); padding: 16px 12px; margin: 0; }
.help-search__hint a { color: var(--p800); }
.help-search__hit {
  display: block; text-decoration: none; padding: 10px 12px; border-radius: 8px;
}
.help-search__hit.is-active { background: var(--n100); }
.help-search__hit-cat {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--n600); margin-bottom: 3px;
}
.help-search__hit-title { display: block; font-size: 14.5px; font-weight: 500; color: var(--n900); }
.help-search__hit-desc {
  display: block; font-size: 13px; color: var(--n600); line-height: 1.45; margin-top: 2px;
}

@media (max-width: 900px) {
  .doc__grid--home { grid-template-columns: minmax(0, 1fr); }
  .help-search { padding: 8vh 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-side__chev, .docs-bar__search { transition: none; }
  .doc-side__group::details-content,
  .doc-faq__row::details-content { transition: none; }
  .help-search__backdrop { backdrop-filter: none; }
}

/* ── Images ─────────────────────────────────────── */
.doc__hero { margin: 30px 0 36px; }   /* the opener follows directly; match .doc__fig */
.doc__fig { margin: 36px 0; }

/* ── Cropped and small captures ──────────────────
   A complete view of a screen ships bare. A capture that had to be cut through
   its own content, or one small enough to float in the column, sits on a tinted
   ground with even padding, and the cut edges fade into that ground instead of
   ending on a hard line. The fade colour IS the ground, so the crop dissolves
   rather than stopping. */
.doc-shot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  background: var(--n100);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
  --fade: 64px;
}
.doc-shot img { border-radius: 6px; }

/* ── One box, every capture ──────────────────────
   Every figure is the same landscape box on every article: column width at
   16:10. A capture whose UI is small is never shrunk or given a size of its
   own — it is centred with more ground around it.

   Two CSS traps, both of which let a tall image overflow before they were
   fixed: a percentage height cannot resolve against a box sized by
   aspect-ratio, so the ground is absolutely inset; and a percentage max-height
   on a child of an auto-sized grid row has no basis, so the ground is flex. */
.doc__hero, .doc__fig {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  aspect-ratio: 16 / 10;
}
.doc__hero img, .doc__fig img, .doc-shot img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  background: var(--n100);
}
/* Two boxes, both column width. 16:10 is the shape of a full-screen capture;
   16:6 is for a wide short strip that would otherwise float in a sea of ground. */
.doc__hero[data-size="narrow"], .doc__fig[data-size="narrow"] { aspect-ratio: 16 / 6; }

/* Fade only the edge where a balanced crop is not available — a scrolling panel
   that runs on below the frame, a timeline that runs on past it. The other
   edges are the interface's own card edges, cropped with even margins, so they
   are real boundaries and need nothing. If an edge looks like it needs a fade,
   the crop is usually the thing to fix first. */
.doc-shot[data-fade~="top"]    { padding-top: 12px; }
.doc-shot[data-fade~="bottom"] { padding-bottom: 12px; }
.doc-shot[data-fade~="right"]  { padding-right: 12px; }
.doc-shot[data-fade~="left"]   { padding-left: 12px; }

.doc-shot[data-fade="bottom"] img {
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to top, transparent 0, #000 var(--fade));
}
.doc-shot[data-fade="top"] img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade));
}
.doc-shot[data-fade="top bottom"] img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent 100%);
}
.doc-shot[data-fade="right"] img {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
          mask-image: linear-gradient(to left, transparent 0, #000 var(--fade));
}
/* A wide strip cut on both sides. Much narrower than the default: the title and
   the first card's text sit close to the left edge, and 40px already washes them out. */
.doc-shot[data-fade="left right"] { --fade: 28px; }
.doc-shot[data-fade="left right"] img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent 100%);
}
.doc-shot[data-fade~="top"] img    { border-top-left-radius: 0; border-top-right-radius: 0; }
.doc-shot[data-fade~="bottom"] img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.doc-shot[data-fade~="right"] img  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.doc-shot[data-fade~="left"] img   { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.doc-shot[data-fade="top right"] img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade)),
                      linear-gradient(to left, transparent 0, #000 var(--fade));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade)),
                      linear-gradient(to left, transparent 0, #000 var(--fade));
          mask-composite: intersect;
}
/* Full bleed: the capture runs to the ground's own edge on the named sides and
   keeps its place on the others. Left and bottom padding are % of the box width,
   so the image holds position as the column narrows; the crop is cut to the
   aspect they leave (0.925 / 0.325 in a 16:6 box). Declared after the fade
   padding so it wins at equal specificity. */
.doc-shot[data-bleed] { overflow: hidden; --fade: 40px; }   /* a short strip: 64px would reach the controls */
.doc-shot[data-bleed~="top"]   { padding-top: 0;   align-items: flex-start; }
.doc-shot[data-bleed~="right"] { padding-right: 0; justify-content: flex-end; }
.doc-shot[data-bleed="top right"] { padding-left: 7.5%; padding-bottom: 5%; }


/* Bare images — a complete view of a screen, no ground, no fade. */
.doc__fig img, .doc__hero img { border-radius: 8px; }

/* Plan pill: a feature that is not in every plan (nav.json "plan") */
.doc-plan { display: inline-flex; align-items: center; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p800); background: var(--p100); border: 1px solid #f2dca0; border-radius: 999px; padding: 5px 9px; vertical-align: middle; }
.doc__plan { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--n600); margin-bottom: 14px; }