/* The docs (app/actions/docs/page.tsx): a top bar, the navigation (a drawer on a phone, the popover), the page, and its
   outline. The page's HTML is built from markdown (app/lib/docs-build.ts), so its components are styled here by class.
   Code is coloured by --code-* (shiki's css-variables theme): the home page's key and string colours, and their kin.
   Only docs pages link this sheet (app.css says why pages don't, as a rule): a link into /docs from the app's other pages
   carries data-rmx-document, or the docs paint unstyled until it loads. */
@layer app {
  .docs {
    --docs-top: 64px;
    --code-foreground: var(--text);
    --code-background: transparent;
    --code-token-comment: var(--faint);
    --code-token-keyword: light-dark(#355e9d, #a9c8f5);
    --code-token-string: light-dark(#875121, #e7b77f);
    --code-token-string-expression: light-dark(#875121, #e7b77f);
    --code-token-function: light-dark(#0b7a68, #8fd6c6);
    --code-token-constant: light-dark(#7040b0, #d4b8f2);
    --code-token-parameter: var(--text);
    --code-token-punctuation: var(--muted);
    --code-token-link: light-dark(#355e9d, #a9c8f5);
    --code-token-inserted: var(--completed);
    --code-token-deleted: var(--failed);
    --code-token-changed: var(--running);
    background: var(--bg);
  }

  .docs-cap { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
  .docs-skip { position: absolute; top: -60px; left: 16px; z-index: 10; padding: 10px 14px; background: var(--accent); color: var(--on-accent); }
  .docs-skip:focus { top: 12px; }

  .docs-top { position: sticky; top: 0; z-index: 4; height: var(--docs-top); display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter); border-bottom: 1px solid var(--rule); background: var(--bg); }
  .docs-brand { display: flex; align-items: center; height: 44px; }
  .docs-sep { color: var(--faint); }
  .docs-crumb { font-weight: 500; }
  .docs-grow { flex: 1; }
  .docs-account { display: flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
  .docs-menu { display: none; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--rule2); border-radius: var(--radius); background: none; }
  .docs-search-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; width: 260px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: 13px; }
  .docs-search-trigger:hover { border-color: var(--muted); color: var(--text); }
  .docs-search-trigger kbd { padding: 1px 6px; border: 1px solid var(--rule2); border-radius: 3px; color: var(--faint); font-family: var(--font-mono); font-size: 11px; }

  .docs-body { display: grid; grid-template-columns: 272px minmax(0, 1fr) 232px; }
  /* The navigation is a popover (the phone's drawer) that is always shown here: the UA's popover box undone. */
  .docs-nav { position: sticky; inset: var(--docs-top) auto auto; display: block; width: auto; height: calc(100vh - var(--docs-top)); margin: 0; padding: 28px 20px 48px var(--gutter); overflow-y: auto; overscroll-behavior: contain; border: 0; border-right: 1px solid var(--rule); background: var(--bg); color: var(--text); scrollbar-width: thin; }
  .docs-nav-group + .docs-nav-group { margin-top: 26px; }
  .docs-nav .docs-cap { margin-bottom: 8px; }
  .docs-nav ul { margin: 0; padding: 0; list-style: none; }
  .docs-nav a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 10px 5px 0; color: var(--muted); font-size: 14px; line-height: 1.3; }
  .docs-nav a::before { content: ""; width: 3px; height: 14px; flex: none; background: transparent; }
  .docs-nav a:hover { color: var(--text); }
  .docs-nav a[aria-current] { color: var(--text); font-weight: 500; }
  .docs-nav a[aria-current]::before { background: var(--accent); }

  .docs-main { min-width: 0; padding: 44px 56px 96px; }
  .docs-article { max-width: 740px; margin: 0 auto; }
  .docs-eyebrow { display: block; margin-bottom: 14px; }
  .docs-article h1 { font-size: 40px; overflow-wrap: anywhere; }
  .docs-lede { max-width: 640px; margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.5; }
  .docs-actions { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
  .docs-more { position: relative; }
  .docs-more summary { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule2); border-radius: var(--radius); color: var(--muted); cursor: pointer; list-style: none; }
  .docs-more summary::-webkit-details-marker { display: none; }
  .docs-more summary:hover, .docs-more[open] summary { border-color: var(--muted); color: var(--text); }
  .docs-more-menu { position: absolute; top: 44px; left: 0; z-index: 3; width: 260px; padding: 6px; display: flex; flex-direction: column; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--panel); }
  .docs-more-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: var(--radius); }
  .docs-more-menu a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
  .docs-more-menu strong { font-size: 13px; font-weight: 500; }
  .docs-more-menu small { color: var(--muted); font-size: 12px; }

  .docs-toc { position: sticky; top: var(--docs-top); max-height: calc(100vh - var(--docs-top)); overflow-y: auto; padding: 48px var(--gutter) 48px 0; }
  .docs-toc .docs-cap { margin-bottom: 12px; }
  .docs-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--rule); }
  .docs-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; color: var(--muted); font-size: 13px; line-height: 1.35; }
  .docs-toc [data-depth="3"] a { padding-left: 26px; }
  .docs-toc a:hover { color: var(--text); }
  .docs-toc a[aria-current] { color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }

  .docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
  .docs-pager a { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--rule2); border-radius: var(--radius); }
  .docs-pager a:hover { border-color: var(--accent); color: inherit; }
  .docs-pager strong { font-size: 15px; font-weight: 500; }
  .docs-next { grid-column: 2; align-items: flex-end; text-align: right; }

  /* The page. */
  .docs-prose { margin-top: 32px; font-size: 15px; line-height: 1.7; }
  .docs-prose > * + * { margin-top: 18px; }
  .docs-prose :is(h2, h3) { scroll-margin-top: calc(var(--docs-top) + 24px); }
  .docs-prose h2 { margin-top: 52px; font-size: 26px; }
  .docs-prose h3 { margin-top: 36px; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
  .docs-prose :is(h2, h3) + * { margin-top: 12px; }
  .docs-prose :is(h2, h3) > a { color: inherit; }
  .docs-prose :is(h2, h3) > a::after { content: "#"; margin-left: 10px; color: var(--faint); font-family: var(--font-mono); font-size: .7em; opacity: 0; transition: opacity 120ms ease; }
  .docs-prose :is(h2, h3):hover > a::after, .docs-prose :is(h2, h3) > a:focus-visible::after { opacity: 1; }
  .docs-prose a:not([class]) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
  .docs-prose a:not([class]):hover { text-decoration-color: currentColor; }
  .docs-prose :is(h2, h3) > a:not([class]) { text-decoration: none; }
  .docs-prose strong { font-weight: 500; }
  .docs-prose :not(pre) > code { padding: 1px 5px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); font-family: var(--font-mono); font-size: .86em; overflow-wrap: break-word; }
  .docs-prose :is(ul, ol):not([class]) { padding-left: 22px; }
  .docs-prose li + li { margin-top: 6px; }
  .docs-prose li::marker { color: var(--faint); }
  .docs-prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -22px; }
  .docs-prose li > input[type="checkbox"] { margin: 0 8px 0 0; accent-color: var(--accent); vertical-align: -1px; }
  .docs-prose blockquote { margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--rule2); color: var(--muted); }
  .docs-prose hr { border: 0; border-top: 1px solid var(--rule); }
  .docs-prose img { max-width: 100%; }
  .docs-table { overflow-x: auto; }
  .docs-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .docs-table th { color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
  .docs-table :is(th, td) { padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }

  /* Code: a box with a head (the title, or the language, and Copy); a code group's head is its tabs. */
  .docs-code { border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--panel); }
  .docs-code-head, .docs-tabs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .docs-code-head { min-height: 38px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--rule); color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
  .docs-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; tab-size: 2; }
  .docs-code pre code { font-family: inherit; }
  .docs-copy { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
  .docs-copy:hover { border-color: var(--rule2); color: var(--text); }

  /* Tabs, and code groups: native radios (they work, and arrow keys move them, before any script); the checked one's panel is shown. */
  .docs-tabs-head { border-bottom: 1px solid var(--rule); }
  .docs-code .docs-tabs-head { padding: 0 6px 0 14px; }
  .docs-tablist { display: flex; gap: 22px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .docs-tablist label { position: relative; display: flex; align-items: center; height: 40px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; white-space: nowrap; cursor: pointer; }
  .docs-code .docs-tablist label { height: 38px; font-family: var(--font-mono); font-size: 12px; }
  .docs-tablist label:hover { color: var(--text); }
  .docs-tablist label:has(input:checked) { border-bottom-color: var(--accent); color: var(--text); }
  .docs-tablist label:has(input:focus-visible) { box-shadow: var(--focus); }
  .docs-tablist input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .docs-panel { display: none; }
  .docs-tabs:not(.docs-code) > .docs-panel { padding-top: 14px; }
  .docs-tabs:not(.docs-code) > .docs-panel > :first-child { margin-top: 0; }
  .docs-tabs:not(.docs-code) > .docs-panel > * + * { margin-top: 18px; }
  .docs-tabs:has(> .docs-tabs-head label:nth-child(1) > input:checked) > .docs-panel:nth-child(2),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(2) > input:checked) > .docs-panel:nth-child(3),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(3) > input:checked) > .docs-panel:nth-child(4),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(4) > input:checked) > .docs-panel:nth-child(5),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(5) > input:checked) > .docs-panel:nth-child(6),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(6) > input:checked) > .docs-panel:nth-child(7),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(7) > input:checked) > .docs-panel:nth-child(8),
  .docs-tabs:has(> .docs-tabs-head label:nth-child(8) > input:checked) > .docs-panel:nth-child(9) { display: block; }

  /* Callouts: a 3px line in the kind's colour, and the kind said in words (as a status is). */
  .docs-callout { padding: 12px 16px 14px; border: 1px solid var(--rule2); border-left: 3px solid var(--tone); border-radius: var(--radius); background: var(--panel); font-size: 14px; line-height: 1.6; }
  .docs-callout > * + * { margin-top: 8px; }
  .docs-callout-title { font-weight: 500; }
  .docs-callout[data-kind="note"] { --tone: var(--pending); }
  .docs-callout[data-kind="tip"] { --tone: var(--completed); }
  .docs-callout[data-kind="warning"] { --tone: var(--running); }
  .docs-callout[data-kind="danger"] { --tone: var(--failed); }

  .docs-cards { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
  .docs-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; border: 1px solid var(--rule2); border-radius: var(--radius); background: var(--panel); transition: border-color 140ms ease; }
  .docs-card:has(.docs-card-title:hover), .docs-card:has(.docs-card-title:focus-visible) { border-color: var(--accent); }
  .docs-card-icon { color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
  .docs-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
  .docs-card-title span { color: var(--faint); transition: translate 140ms var(--ease-out), color 140ms ease; }
  .docs-card-title:hover span { color: var(--accent); translate: 3px 0; }
  a.docs-card-title::after { content: ""; position: absolute; inset: 0; }
  a.docs-card-title:focus-visible { box-shadow: none; }
  .docs-card:has(a.docs-card-title:focus-visible) { box-shadow: var(--focus); }
  .docs-card-body { color: var(--muted); font-size: 14px; line-height: 1.55; }
  .docs-card-body > * + * { margin-top: 8px; }
  .docs-card-body a { position: relative; z-index: 1; }

  .docs-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .docs-steps .docs-step { position: relative; margin: 0; padding: 0 0 26px 46px; counter-increment: step; }
  .docs-step::before { content: counter(step); position: absolute; top: 0; left: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule2); border-radius: 50%; background: var(--bg); font-family: var(--font-mono); font-size: 12px; }
  .docs-step::after { content: ""; position: absolute; top: 34px; bottom: 6px; left: 14px; width: 1px; background: var(--rule); }
  .docs-step:last-child { padding-bottom: 0; }
  .docs-step:last-child::after { display: none; }
  .docs-step > * + * { margin-top: 10px; }
  .docs-step > .docs-step-title + * { margin-top: 2px; }
  .docs-step-title { font-size: 16px; font-weight: 500; line-height: 28px; }

  .docs-accordion { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .docs-prose .docs-accordion + .docs-accordion { margin-top: -1px; }
  .docs-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; font-weight: 500; cursor: pointer; list-style: none; }
  .docs-accordion summary::-webkit-details-marker { display: none; }
  .docs-accordion summary::after { content: "+"; color: var(--faint); font-family: var(--font-mono); }
  .docs-accordion[open] summary::after { content: "−"; }
  .docs-accordion summary:hover { color: var(--accent); }
  .docs-accordion-body { padding-bottom: 18px; }
  .docs-accordion-body > * + * { margin-top: 12px; }

  .docs-fields { border-top: 1px solid var(--rule); }
  .docs-field { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
  .docs-field-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--font-mono); font-size: 13px; }
  .docs-prose .docs-field-name { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; }
  .docs-field-type, .docs-field-default { color: var(--muted); }
  .docs-prose .docs-field-default code { padding: 0; border: 0; background: none; font-size: 1em; }
  .docs-field-body { margin-top: 6px; color: var(--muted); font-size: 14px; }
  .docs-field-body > * + * { margin-top: 8px; }

  /* A badge: a word, with a 3px line in its tone's colour. */
  .docs-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding-right: 7px; overflow: hidden; border: 1px solid var(--rule2); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; line-height: 1; text-transform: uppercase; vertical-align: 1px; }
  .docs-badge::before { content: ""; align-self: stretch; width: 3px; background: var(--tone, var(--accent)); }
  .docs-badge[data-tone] { --tone: var(--cancelled); }
  .docs-badge[data-tone="pending"] { --tone: var(--pending); }
  .docs-badge[data-tone="running"] { --tone: var(--running); }
  .docs-badge[data-tone="completed"] { --tone: var(--completed); }
  .docs-badge[data-tone="failed"] { --tone: var(--failed); }

  /* Search: a modal dialog near the top, results by page, the chosen one lit with the accent line. */
  .docs-search { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: min(560px, 76vh); margin: 12vh auto auto; padding: 0; border: 1px solid var(--rule2); border-radius: 6px; background: var(--bg); color: var(--text); }
  .docs-search::backdrop { background: rgb(0 0 0 / .55); }
  .docs-search-box { display: flex; flex-direction: column; max-height: min(560px, 76vh); }
  .docs-search input { flex: none; width: 100%; height: 54px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; font-size: 15px; }
  .docs-search input:focus-visible { box-shadow: none; }
  .docs-search input::placeholder { color: var(--faint); }
  .docs-search-list { overflow-y: auto; padding: 0 8px; }
  .docs-search-list:not(:empty) { padding: 4px 8px 8px; }
  .docs-search-page { padding: 12px 10px 6px; }
  .docs-search-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius); }
  .docs-search-hit[aria-selected="true"] { background: color-mix(in srgb, var(--text) 7%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
  .docs-search-hit:hover { color: inherit; background: color-mix(in srgb, var(--text) 5%, transparent); }
  .docs-search-hit strong { font-size: 14px; font-weight: 500; }
  .docs-search-hit span { overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .docs-search mark { background: none; color: var(--accent); }
  .docs-search-empty { padding: 22px 18px; color: var(--muted); font-size: 13px; }
  .docs-search-empty:empty { display: none; }
  .docs-search-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--rule); color: var(--faint); font-family: var(--font-mono); font-size: 11px; }

  @media (max-width: 1200px) {
    .docs-body { grid-template-columns: 256px minmax(0, 1fr); }
    .docs-toc { display: none; }
    .docs-main { padding: 40px 40px 88px; }
  }
  /* A phone, or a narrow window: the navigation is a drawer from the left, opened by the menu button. */
  @media (max-width: 900px) {
    .docs-body { display: block; }
    .docs-menu { display: inline-flex; }
    .docs-nav:not(:popover-open) { display: none; }
    .docs-nav { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100dvh; padding: 24px 20px 48px 22px; border-right: 1px solid var(--rule2); translate: -100% 0; transition: translate 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete; }
    .docs-nav:popover-open { translate: 0 0; @starting-style { translate: -100% 0; } }
    .docs-nav::backdrop { background: rgb(0 0 0 / .55); }
    .docs-menu-close { position: absolute; top: 14px; right: 14px; }
    .docs-main { padding: 32px var(--gutter) 72px; }
  }
  @media (max-width: 720px) {
    .docs-top { gap: 10px; }
    .docs-search-trigger { width: auto; gap: 0; }
    .docs-search-trigger kbd { display: none; }
    .docs-article h1 { font-size: 32px; }
    .docs-lede { font-size: 16px; }
    .docs-cards { grid-template-columns: minmax(0, 1fr); }
    .docs-pager { grid-template-columns: minmax(0, 1fr); }
    .docs-next { grid-column: 1; }
    .docs-search { margin-top: 16px; max-height: calc(100dvh - 32px); }
    .docs-search-box { max-height: calc(100dvh - 32px); }
    .docs-search-foot { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .docs-nav, .docs-card-title span { transition: none; }
  }
}