/*
 * docs.css -- the docs layout and card components of the static pages (ACB-724).
 *
 * Plain CSS that restates the design system (src/index.css and src/features/landing/components/,
 * which win over .design-sync) for /docs and the guides. Only the pages in DOCS_CSS_PAGES
 * (src/test/static-pages.test.ts) load it, straight after legal.css, as /docs.css?v=<hash>. An edit
 * changes its hash on every page that links it, so a guide reuses these classes and never edits it.
 * It declares no :root block and no token: it reads the --ac-* tokens legal.css restates from
 * src/index.css, and uses no hex colour.
 *
 * Layout: main is the landing Container (1400px, gutters 20/32/40, so 1320 of content at 1440), one
 * centred column. Every section starts and ends on its edges: one column, or the one grid
 * (.docs-grid-2, .docs-grid-3, .docs-guides, .docs-compare) with one gap, the 650px and 426px columns
 * of the homepage's Pricing and ThreeReasons. Column counts are set per breakpoint, never auto-fit,
 * so an odd card cannot fall onto its own row. Breakpoints are Tailwind's: 640 gutters, 768 two
 * columns, 1024 tables and figures side by side, 1280 three columns, two columns inside a column and
 * three-column tables side by side; 1400, the first width with the full 1320 of content, is the one
 * addition. Under 640 a table of three or more columns becomes blocks, each cell named by its data-label.
 *
 * Spacing, one scale, every step measured on the homepage at 1440:
 *   4 table cell and title to text; 8 step row and chip gap; 14 heading to text; 20 card gap and
 *   card padding (22 at the sides, the Indicators card); 40 section gap. The footer restates
 *   SiteFooter's own values.
 * Type, measured there too: h1 36/27 (the h2 step below the 46), h2 26/21 (the ThreeReasons title),
 * card title 19, lede 16.5/15, card text 14.5, table text 13.5. Card radius 16.
 *
 * Each class below names what it restates:
 *
 * .docs-layout -> features/landing/components/shared
 * .docs-lede -> features/landing/components/shared
 * .docs-intro -> features/landing/components/shared
 * .docs-eyebrow -> components/ac/PillEyebrow
 * .docs-toc -> components/ac/PillEyebrow
 * .docs-grid -> features/landing/components/ThreeReasons
 * .docs-grid-2 -> features/landing/components/ThreeReasons
 * .docs-grid-3 -> features/landing/components/ThreeReasons
 * .docs-fold -> .ac-card
 * .docs-card -> .ac-stat
 * .docs-card-title -> features/landing/components/ThreeReasons
 * .docs-accent-cyan -> .ac-stat
 * .docs-accent-violet -> .ac-stat
 * .docs-accent-green -> .ac-stat
 * .docs-accent-amber -> .ac-stat
 * .docs-accent-red -> .ac-stat
 * .docs-guides -> .ac-card
 * .docs-method -> features/landing/components/ThreeReasons
 * .docs-steps -> .ac-card
 * .docs-compare -> features/landing/components/Pricing
 * .docs-stack -> features/landing/components/Pricing
 * .docs-hooks -> .ac-trow
 * .docs-facts -> components/dashboard/SurfaceCard
 * .docs-code -> components/dashboard/ConsoleFrame
 * .docs-code-label -> components/dashboard/ConsoleFrame
 * .docs-footer -> components/layout/SiteFooter
 * .docs-footer-inner -> components/layout/SiteFooter
 * .docs-footer-top -> components/layout/SiteFooter
 * .docs-footer-nav -> components/layout/SiteFooter
 */

body.docs-layout {
  --docs-accent: var(--ac-accent);
  --docs-glow: var(--ac-glow);
  --docs-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  --docs-gutter: 20px;
  --docs-s: 4px;
  --docs-row: 8px;
  --docs-m: 14px;
  --docs-l: 20px;
  --docs-card-x: 22px;
  --docs-section: 40px;
}
.docs-accent-cyan,   .docs-guides > li:nth-child(4n + 1) { --docs-accent: var(--ac-accent); }
.docs-accent-violet, .docs-guides > li:nth-child(4n + 2) { --docs-accent: var(--ac-accent-2-soft); }
.docs-accent-green,  .docs-guides > li:nth-child(4n + 3) { --docs-accent: var(--ac-accent-3); }
.docs-accent-amber,  .docs-guides > li:nth-child(4n)     { --docs-accent: var(--ac-warn); }
.docs-accent-red { --docs-accent: var(--ac-danger); }
[class*='docs-accent-'], .docs-guides > li { --docs-glow: color-mix(in srgb, var(--docs-accent) 20%, transparent); }

/* ===== the frame ===== */
body.docs-layout main { max-width: 1400px; margin: 0 auto; padding: var(--docs-section) var(--docs-gutter); }
body.docs-layout main [id] { scroll-margin-top: 96px; }
body.docs-layout main > section { margin-top: var(--docs-section); }

/* The bar LandingNav measures at 1440: 12px padding and an inline brand link 55px tall, so the mark
   sits 3.5px above the links' centre line. legal.css lands on 81px and centres it; /docs matches the
   homepage to the pixel. */
body.docs-layout .masthead { line-height: 1.5; }
body.docs-layout .masthead-inner { padding-top: 12px; padding-bottom: 12px; }
body.docs-layout .masthead .brand { padding-bottom: 7px; }

/* ===== type: the page header and section heads are centred, as the homepage's are ===== */
body.docs-layout h1, body.docs-layout h2 { text-wrap: balance; }
body.docs-layout h1 { margin: 0 0 var(--docs-m); text-align: center; font-size: 27px; line-height: 1.08; letter-spacing: -0.025em; }
body.docs-layout .meta { margin: 0 0 var(--docs-m); text-align: center; }
body.docs-layout h2 { margin: 0 0 var(--docs-l); text-align: center; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
body.docs-layout h2:has(+ .docs-intro) { margin-bottom: var(--docs-m); }
.docs-lede { max-width: 47.5rem; margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.625; color: var(--ac-text-dim); }
.docs-intro { max-width: 47.5rem; margin: 0 auto var(--docs-l); text-align: center; font-size: 14.5px; line-height: 1.625; }
.docs-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ac-accent-soft); }
.docs-accent-violet .docs-eyebrow { color: var(--ac-accent-2-soft); }
.docs-accent-green .docs-eyebrow { color: var(--ac-accent-3); }
.docs-accent-amber .docs-eyebrow { color: var(--ac-warn); }
.docs-accent-red .docs-eyebrow { color: var(--ac-danger); }
.docs-card-title { margin: 0 0 var(--docs-s); font-family: var(--font-sans); font-size: 19px; font-weight: 600;
  letter-spacing: normal; line-height: 1.25; text-transform: none; color: var(--ac-text); }

/* A guide's short answer: a callout at the lede's width, under the page header */
body.docs-layout main > .key { max-width: 47.5rem; margin: var(--docs-l) auto 0; }

/* ===== the contents chips: ChipEyebrow, real links in one centred row under the intro ===== */
.docs-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--docs-row); margin: var(--docs-l) 0 0; }
main > section + .docs-toc { margin-top: var(--docs-section); }
.docs-toc:has(a:nth-child(8)) { max-width: 47.5rem; margin-inline: auto; }
.docs-toc a { display: inline-flex; padding: 6px 12px; border: 1px solid var(--ac-border); border-radius: 999px;
  background: var(--ac-surface-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ac-accent-soft); }
.docs-toc a:hover { border-color: var(--ac-border-strong); background: var(--ac-surface-hover); }

/* ===== the one grid ===== */
.docs-grid, .docs-guides, .docs-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--docs-l);
  margin: 0; padding: 0; list-style: none; }
.docs-grid > *, .docs-guides > *, .docs-compare > * { min-width: 0; margin: 0; }
body.docs-layout :is(main > section, .docs-fold) > * + * { margin-top: var(--docs-l); }
body.docs-layout :is(main > section, .docs-fold) > * + .table-wrap { margin-top: var(--docs-l); }
body.docs-layout :is(main > section, .docs-fold) > :is(h2, .docs-intro) + * { margin-top: 0; }
body.docs-layout :is(main > section, .docs-fold) > .docs-card-title { margin-bottom: var(--docs-m); text-align: center; }

/* ===== a fold: a native <details>, closed by default, with the section's h2 in its <summary>. The
   summary is the card; the open body is an ordinary section at the full content width. ===== */
.docs-fold { margin: var(--docs-l) 0 0; }
.docs-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--docs-m);
  padding: var(--docs-m) var(--docs-card-x); border: 1px solid var(--ac-border); border-radius: var(--radius);
  background: var(--docs-card-bg); cursor: pointer; list-style: none; transition: border-color 0.18s ease; }
.docs-fold > summary::-webkit-details-marker { width: 0; margin: 0; opacity: 0; }
.docs-fold > summary:hover { border-color: var(--ac-border-strong); }
.docs-fold > summary:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.docs-fold > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-right: var(--docs-s);
  border-right: 2px solid var(--ac-accent-soft); border-bottom: 2px solid var(--ac-accent-soft);
  transform: rotate(45deg); transition: transform 0.18s ease; }
.docs-fold[open] > summary::after { transform: rotate(-135deg); }
body.docs-layout .docs-fold > summary h2 { margin: 0; text-align: left; font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: normal; text-wrap: wrap; }
.docs-stack { display: flex; flex-direction: column; gap: var(--docs-l); }
.docs-stack > * { margin: 0; }
.docs-stack > * { flex: 1 1 auto; }
.docs-compare > .docs-grid-2, .docs-stack > .docs-grid-2 { grid-template-columns: minmax(0, 1fr); }

/* ===== cards ===== */
.docs-card, .docs-guides > li { position: relative; overflow: hidden; padding: var(--docs-l) var(--docs-card-x);
  border: 1px solid var(--ac-border); border-radius: var(--radius); background: var(--docs-card-bg); }
.docs-card, .docs-guides > li, .docs-steps > li { font-size: 14.5px; line-height: 1.625; color: var(--ac-text-dim); }
.docs-card p { margin: 0 0 var(--docs-m); font-size: 14.5px; line-height: 1.625; }
.docs-card p.docs-card-title { margin-bottom: var(--docs-s); font-size: 19px; line-height: 1.25; }
.docs-card > :last-child { margin-bottom: 0; }
.docs-card::before, .docs-guides > li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--docs-accent), transparent) }
.docs-guides > li::before { background-size: 200% 100%; animation: acShimmer 4s linear infinite; }
.docs-card::after, .docs-guides > li::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  transition: opacity 0.2s ease; box-shadow: inset 0 0 0 1px var(--docs-accent); pointer-events: none; }
.docs-card:hover::after, .docs-guides > li:hover::after { opacity: 0.5; }
.docs-card:hover, .docs-guides > li:hover { box-shadow: 0 16px 44px var(--docs-glow); }
@keyframes acShimmer { to { background-position: 200% center; } }

.docs-guides > li { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.docs-guides > li:hover { transform: translateY(-2px); border-color: var(--ac-border-strong); }
.docs-guides a { font-weight: 600; color: var(--ac-text); text-decoration: none; }
.docs-guides a::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* the whole card clicks */
.docs-guides a:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }

.docs-method { display: flex; flex-direction: column; }
.docs-card-title + .docs-code { margin-top: var(--docs-row); }
.docs-card > :not(.docs-eyebrow) + .docs-card-title { margin-top: var(--docs-m); }
.docs-card ol { margin: 0 0 var(--docs-m); padding-left: 1.15rem; }
.docs-card > ul:first-child { margin-top: 0; }
.docs-card ol > li { margin: 0; }
body.docs-layout figure.media { margin: 0; }
/* a run of screenshot cards: one frame, so cards side by side keep their text on one line */
ol.docs-grid figure.media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.docs-card figure.media + p { margin-top: var(--docs-m); }
.docs-grid > figure.media figcaption { text-align: center; }
.docs-card .docs-eyebrow { margin: 0 0 var(--docs-s); font-weight: 400; }

/* ===== numbered steps: one panel of rows, so five steps never leave an orphan ===== */
.docs-steps { counter-reset: docs-step; margin: 0; padding: 0; list-style: none; overflow: hidden;
  border: 1px solid var(--ac-border); border-radius: var(--radius); background: var(--ac-surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.docs-steps:hover { border-color: var(--ac-border-strong); box-shadow: var(--ac-shadow-card); }
.docs-steps > li { counter-increment: docs-step; display: grid; grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--docs-m); margin: 0; padding: var(--docs-row) var(--docs-card-x); border-top: 1px solid var(--ac-hairline); }
.docs-steps > li:first-child { border-top: 0; }
.docs-steps > li::before { content: counter(docs-step, decimal-leading-zero); padding-top: 2px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: var(--ac-accent-soft); }
.docs-steps .docs-card-title { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.625; }
.docs-steps p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.625; }
.docs-steps p:only-child { grid-column: 2 / -1; }

/* ===== reference tables ===== */
body.docs-layout table { min-width: 0; font-size: 13.5px; line-height: 1.55; }
body.docs-layout th, body.docs-layout td { padding: var(--docs-s) var(--docs-m); }
body.docs-layout .table-wrap { margin: 0; border-radius: var(--radius); background: var(--docs-card-bg); }
body.docs-layout .docs-compare > .table-wrap table { height: 100%; }
body.docs-layout td:first-child { color: var(--ac-text); }
body.docs-layout table:not(.docs-hooks, :has(th:nth-child(3))) td:first-child { width: 36%; }
.docs-compare > .docs-card, .docs-stack > .docs-card { display: flex; flex-direction: column; }
.docs-compare > .docs-card .table-wrap { flex: 1; }
.docs-compare > .docs-card table { height: 100%; }
body.docs-layout .docs-card .table-wrap { margin: 0 calc(0px - var(--docs-card-x)) calc(0px - var(--docs-l));
  border-width: 1px 0 0; border-radius: 0; background: none; }
body.docs-layout .docs-hooks td:first-child { width: 1%; white-space: nowrap; }
.docs-hooks tbody tr { transition: background 0.14s ease; }
.docs-hooks tbody tr:hover { background: var(--ac-surface-2); }
.docs-facts { margin: 0; padding: 0; list-style: none; }
.docs-facts > li { margin: var(--docs-s) 0 0; }
.docs-card > .docs-facts:not(:last-child) { margin-bottom: var(--docs-m); }

.docs-code { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 var(--docs-m); overflow: hidden;
  border: 1px solid var(--ac-border-strong); border-radius: 18px; background: var(--ac-surface-solid); }
.docs-code:has(code[class*='language-']) { align-content: flex-start; }
.docs-code:has(code[class*='language-']) .docs-code-label { flex: 0 0 100%; border-bottom: 1px solid var(--ac-hairline); }
.docs-code-label { margin: 0; padding: var(--docs-s) var(--docs-m); font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ac-text-dim); }
.docs-card .docs-code-label { margin: 0; font-size: 11.5px; }
body.docs-layout .docs-code .table-wrap { flex: 1 1 16rem; min-width: 0; margin: 0; border: 0; border-radius: 0; background: none; }
.docs-code pre { padding: var(--docs-row) var(--docs-m); }
.docs-code pre code { white-space: pre-wrap; }

body.docs-layout .key, body.docs-layout .note, body.docs-layout .good { margin: 0; padding: var(--docs-l) var(--docs-card-x);
  border-radius: var(--radius); font-size: 14.5px; line-height: 1.625; }
body.docs-layout :is(main > section, .docs-fold) > * + :is(.key, .note, .good) { margin-top: var(--docs-l); }
.docs-grid > .good:only-child { text-align: center; }
.docs-card > :is(.key, .note, .good) { margin: var(--docs-m) 0; }

/* a page's closing lines, after its last section: centred on the lede's column */
body.docs-layout main > section ~ p:not(.key, .note, .good) { max-width: 47.5rem; margin: var(--docs-m) auto 0; text-align: center; }
body.docs-layout main > section + p:not(.key, .note, .good) { margin-top: var(--docs-section); }

/* ===== the footer: SiteFooter, the homepage's, in plain CSS ===== */
.docs-footer { padding: 22px var(--docs-gutter) 26px; border-top: 1px solid var(--ac-hairline); line-height: 1.5; }
.docs-footer-inner { display: flex; flex-direction: column; gap: 12px; max-width: 1400px; margin: 0 auto; }
.docs-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.docs-footer .brand-mark { width: 26px; height: 26px; }
.docs-footer .brand-word { font-size: 15px; }
.docs-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 13px; }
.docs-footer .disclaimer { color: var(--ac-text-mute); }

/* ===== breakpoints ===== */
/* a table of three or more columns cannot fit a phone: each row becomes a block, each cell named by
   its data-label */
@media (max-width: 639.98px) {
  body.docs-layout table:has(th:nth-child(3)), body.docs-layout table:has(th:nth-child(3)) :is(tbody, tr, td) { display: block; width: auto; }
  body.docs-layout table:has(th:nth-child(3)) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.docs-layout table:has(th:nth-child(3)) tr { padding: var(--docs-row) var(--docs-m); border-top: 1px solid var(--ac-hairline); }
  body.docs-layout table:has(th:nth-child(3)) tbody tr:first-child { border-top: 0; }
  body.docs-layout table:has(th:nth-child(3)) td { padding: var(--docs-s) 0 0; border: 0; white-space: normal; }
  body.docs-layout table:has(th:nth-child(3)) td code { white-space: normal; overflow-wrap: anywhere; }
  body.docs-layout table:has(th:nth-child(3)) td:not(:first-child)::before { content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-text-mute); }
}
@media (min-width: 640px) {
  body.docs-layout { --docs-gutter: 32px; }
  body.docs-layout table:has(th:nth-child(3)) { min-width: 34rem; }
  body.docs-layout h1 { font-size: 36px; }
  body.docs-layout h2 { font-size: 26px; }
  .docs-lede { font-size: 16.5px; }
}
@media (min-width: 768px) {
  .docs-grid-2, .docs-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* an odd last card takes the whole row, so it never sits beside a hole */
  .docs-grid-2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .docs-steps > li { grid-template-columns: 22px 200px minmax(0, 1fr); }
  .docs-steps p { grid-column: 3; }
}
@media (min-width: 1024px) {
  body.docs-layout { --docs-gutter: 40px; }
  /* a three-column table needs more than half the page: it waits for 1280 */
  .docs-compare:not(:has(figure, th:nth-child(3))), .docs-compare:has(> figure.media) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two stacks side by side share their row lines, however tall each card runs */
  .docs-compare:has(> :is(.docs-stack, .docs-grid) + :is(.docs-stack, .docs-grid)) > * { display: grid;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: var(--docs-l); }
  .docs-compare:has(> :is(.docs-stack, .docs-grid) + :is(.docs-stack, .docs-grid)) > :has(> :nth-child(2):last-child) { grid-row: span 2; }
  .docs-compare:has(> :is(.docs-stack, .docs-grid) + :is(.docs-stack, .docs-grid)) > :has(> :nth-child(3):last-child) { grid-row: span 3; }
  .docs-compare:has(> :is(.docs-stack, .docs-grid) + :is(.docs-stack, .docs-grid)) > :has(> :nth-child(4):last-child) { grid-row: span 4; }
  .docs-compare:has(> :is(.docs-stack, .docs-grid) + :is(.docs-stack, .docs-grid)) > :has(> :nth-child(5):last-child) { grid-row: span 5; }
  /* a row of text, a figure and text: the figure takes the right column, and the two text blocks
     stay in reading order on the left */
  .docs-compare > figure.media:nth-child(2):nth-last-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .docs-compare > figure.media:nth-child(2):nth-last-child(2) ~ * { grid-column: 1; }
}
@media (min-width: 1280px) {
  .docs-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .docs-compare > .docs-grid-2, .docs-stack > .docs-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* too narrow for two cards beside a figure: the first spans the row, the second stays beside it */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .docs-compare > .docs-stack:has(+ figure.media) { display: contents; }
  .docs-compare > .docs-stack:has(+ figure.media) > :first-child { grid-column: 1 / -1; }
}

/* at the full 1320px of content the text ends level with the image, and the caption hangs below it */
@media (min-width: 1400px) {
  .docs-compare > figure.media:nth-child(2):nth-last-child(2) { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .docs-compare > figure.media:nth-child(2):nth-last-child(2) > picture { grid-row: span 2; }
  .docs-compare > figure.media:nth-child(2):nth-last-child(2) > figcaption { margin-top: calc(0.6rem - var(--docs-l)); }
}

@media (prefers-reduced-motion: reduce) {
  .docs-card::before, .docs-guides > li::before { animation: none; }
  .docs-card::after, .docs-guides > li::after, .docs-guides > li, .docs-steps, .docs-hooks tbody tr,
  .docs-fold > summary, .docs-fold > summary::after { transition: none; }
  .docs-guides > li:hover { transform: none; }
}