/* AIOOS developer docs: the homepage theme of aioos.ai, self-contained.

   Light only, like the homepage: warm paper, raised panels, charcoal ink, one lilac accent, hairlines; Manrope for reading,
   IBM Plex Mono for code, Bebas Neue for the wordmark. The tokens, type scale, header, language switch, cards and footer follow
   the website's homepage family (editorial style.css, typography.css, navigation.css, footer.css). This file does not depend on
   specs/design-lang or on the website: vox-docs/deploy.sh publishes it, with the fonts and the mark next to index.html.

   Old look to new look: Inter and Fustat become Manrope, JetBrains Mono becomes IBM Plex Mono; the blue accent #0084FF becomes
   the lilac-ink #473b70; frosted glass and the mesh background become paper and panel surfaces with 1px hairlines; the OS
   dark mode is gone (the homepage has none). */

/* fonts: the same files the website serves (assets/typography-20260910, assets/editorial-20260908), under the SIL Open Font License */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bebas-neue.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono.woff2) format('woff2'); }

:root {
  --paper: #f2eddf;
  --panel: #f8f4e9;
  --soft: #eae5d8;
  --ink: #191b1b;
  --muted: #5f5d56;
  --line: #aaa597;
  --accent: #473b70;
  --lilac: #b5a6cd;
  --tint: #e4dced;
  --edge: #aaa5978c;            /* card and table borders, as on the pricing and FAQ cards */
  --edge-soft: #aaa59766;       /* hairlines */
  --accent-edge: #473b7033;     /* lilac card borders */
  --type-family: 'Manrope', Arial, sans-serif;
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-body: clamp(1rem, .96rem + .18vw, 1.125rem);
  --gutter: clamp(22px, 4.4vw, 80px);
  --ease: cubic-bezier(.2, .65, .3, 1);
  --docs-header: 76px;
  --docs-reading: 54rem;        /* the reading column, 864px */
}
@media (max-width: 767px) { :root { --gutter: 22px; } }
@media (max-width: 370px) { :root { --gutter: 18px; } }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--docs-header) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--type-body)/1.7 var(--type-family); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--panel); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, pre:focus-visible, table:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre, table { margin: 0; }

/* language: one page, three trees. main#betriebe.owner is the German guide for operators, then the English and the German developer
   docs. html[data-lang] picks the language (head script, setLang(), ?lang= and the hash of a link); [data-l] hides the other one.
   The contents sidebar and the switch both ask for main[data-l="..."], so the two German trees follow each other in the list. */
html[data-lang="en"] [data-l="de"] { display: none; }
html[data-lang="de"] [data-l="en"] { display: none; }

/* ---------- skip link ---------- */
.skip-link { position: fixed; z-index: 90; top: 12px; left: 20px; padding: 14px 20px; color: var(--paper); background: var(--ink); text-decoration: none; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link:focus { clip-path: none; width: auto; height: auto; overflow: visible; }

/* ---------- header: the homepage's bar, with the developer pages and the language switch ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 28px; height: var(--docs-header);
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2));
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; color: var(--ink); text-decoration: none; }
.brand img { width: 46px; height: auto; }
.brand span { padding-top: 4px; font: 400 2.25rem/1 var(--display); letter-spacing: -.005em; }
.brand:hover { color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; color: var(--ink); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.langsw { display: inline-flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .35); }
.langsw button { min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px; color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .04em; transition: background 160ms var(--ease), color 160ms var(--ease); }
.langsw button:hover { background: var(--tint); color: var(--accent); }
.langsw button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
html[data-lang="en"] .langsw [data-set="en"], html[data-lang="de"] .langsw [data-set="de"] { background: var(--ink); color: var(--panel); }

/* ---------- page frame ---------- */
.docs { width: min(100% - var(--gutter) * 2, 1440px); margin-inline: auto; padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.docs > .intro, .docs > .doorway, .docs > main { max-width: var(--docs-reading); min-width: 0; }
.kicker { margin-bottom: 18px; color: var(--accent); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.docs h1 { max-width: 14ch; font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem); font-weight: 500; line-height: 1.03; letter-spacing: -.055em; overflow-wrap: break-word; hyphens: auto; }
.intro { margin-bottom: clamp(32px, 4vw, 56px); }

/* ---------- the doors ---------- */
.doorway { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.door { display: block; min-width: 0; padding: clamp(20px, 2.4vw, 28px); color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; text-decoration: none; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.door:hover { color: var(--ink); border-color: var(--accent); }
.door:focus-visible { border-color: var(--accent); }
.door-k { display: block; color: var(--accent); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.door-t { display: block; margin: 8px 0 6px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.door-s { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .door:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #191b1b08; } }

/* ---------- contents sidebar: built by the page script from each language tree's headings ---------- */
.toc { display: none; }
@media (min-width: 1180px) {
  .docs { display: grid; grid-template-columns: 224px minmax(0, var(--docs-reading)); column-gap: 64px; align-items: start; }
  .docs > .intro, .docs > .doorway, .docs > main { grid-column: 2; }
  .toc { display: block; grid-column: 1; grid-row: 1 / span 6; position: sticky; top: calc(var(--docs-header) + 28px); max-height: calc(100vh - var(--docs-header) - 56px); overflow-y: auto; padding-top: 6px; overscroll-behavior: contain; }
  .toc .toc-t { margin: 0 0 12px; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--edge-soft); }
  .toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: .875rem; line-height: 1.4; text-decoration: none; }
  .toc a:hover { color: var(--ink); }
  .toc a.sub { padding-left: 28px; font-size: .8125rem; }
  .toc a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 650; }
  .toc a:focus-visible { outline-offset: -2px; border-radius: 3px; }
  .toc .toc-g { display: block; padding: 18px 0 4px 14px; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
}

/* ---------- prose ---------- */
.lede { max-width: 62ch; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); line-height: 1.6; }
main p + p { margin-top: 14px; }
main h2 { margin: clamp(56px, 6vw, 88px) 0 18px; padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--edge-soft); font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
main h3 { margin: 40px 0 10px; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem); font-weight: 650; line-height: 1.25; letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; }
main.owner h3 { margin: 28px 0 8px; font-size: 1.0625rem; letter-spacing: -.005em; }
main p, main li, main dd { max-width: 70ch; }
main ul, main ol { padding-left: 1.4em; }
main li { margin: .45em 0; }
main li::marker { color: var(--accent); }
main strong, main b { font-weight: 650; }
main :is(h2, h3) code { font-size: .8em; }
main dl { margin-top: 12px; }
main dt { margin-top: 20px; font-weight: 650; line-height: 1.5; }
main dd { margin: 4px 0 0; }
.said { font-weight: 650; }
main :is(p, li, dd, td) a { overflow-wrap: anywhere; }

/* numbered steps: the order is real */
ol.steps { padding: 0; list-style: none; counter-reset: step; }
ol.steps > li { position: relative; max-width: 70ch; margin: 18px 0; padding-left: 52px; counter-increment: step; }
ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent); background: var(--tint); border: 1px solid var(--accent-edge); border-radius: 50%; font-size: .875rem; font-weight: 600; line-height: 1; }

/* code */
code { padding: .12em .42em; color: var(--ink); background: color-mix(in srgb, var(--tint) 75%, var(--panel)); border: 1px solid #473b7022; border-radius: 4px; font: 400 .88em/1.2 var(--mono); overflow-wrap: anywhere; }
pre { max-width: 100%; margin: 20px 0; padding: 18px 20px; overflow-x: auto; color: var(--ink); background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; font: 400 .8125rem/1.7 var(--mono); tab-size: 2; }
pre code { padding: 0; background: none; border: 0; border-radius: 0; font: inherit; overflow-wrap: normal; }

/* tables: a framed panel like the website's reference tables; below 720px each one scrolls inside itself instead of widening the page */
table { width: 100%; margin: 20px 0; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--edge); border-radius: 8px; font-size: .9375rem; }
th { padding: 13px 16px; background: var(--soft); border-bottom: 1px solid var(--edge); color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
th code { text-transform: none; }
td { padding: 14px 16px; border-bottom: 1px solid var(--edge-soft); color: var(--ink); line-height: 1.6; vertical-align: top; }
td:first-child { font-weight: 600; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) { table { display: block; max-width: 100%; overflow-x: auto; } td, th { padding-inline: 14px; } }

/* note */
.note { margin: 24px 0; padding: 18px 22px; background: linear-gradient(125deg, color-mix(in srgb, var(--panel) 20%, var(--tint)), var(--tint)); border: 1px solid var(--accent-edge); border-left: 3px solid var(--accent); border-radius: 8px; }
.note p { max-width: none; margin: 0; font-size: .9375rem; line-height: 1.65; }

/* the footer line that closes each language tree */
main footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--edge-soft); color: var(--muted); font-size: .8125rem; line-height: 1.6; }
main footer p { max-width: none; }

/* ---------- site footer: the homepage footer's grid, with the developer pages and the legal links ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer-grid { display: grid; grid-template-columns: minmax(170px, .95fr) repeat(2, minmax(150px, .75fr)); gap: 24px; width: min(100% - var(--gutter) * 2, 1440px); margin-inline: auto; padding-block: 36px 40px; }
.footer-brand { display: inline-flex; align-items: center; align-self: start; gap: 12px; min-height: 50px; color: var(--ink); text-decoration: none; }
.footer-brand:hover { color: var(--ink); }
.footer-brand img { width: 76px; height: auto; }
.footer-brand span { font: 400 3.75rem/1 var(--display); }
.footer-group h3 { margin: 0 0 10px; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.footer-group ul { margin: 0; padding: 0; list-style: none; }
.footer-group li { margin: 0; }
.footer-group a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; color: var(--muted); font-size: .9375rem; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.footer-group a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; padding-top: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand img { width: 64px; }
  .footer-brand span { font-size: 3.125rem; }
  .footer-group a { font-size: .8125rem; }
}

/* ---------- small screens: the header wraps into two rows and scrolls away; the docs have no sidebar here ---------- */
@media (max-width: 720px) {
  html { scroll-padding-top: 24px; }
  .site-header { position: static; flex-wrap: wrap; height: auto; gap: 0 12px; padding-block: 8px 4px; }
  .brand { order: 1; }
  .langsw { order: 2; }
  .site-nav { order: 3; flex: 0 0 100%; justify-content: space-between; gap: 12px; margin-top: 4px; border-top: 1px solid var(--edge-soft); }
  .site-nav a { font-size: .875rem; }
  .brand img { width: 40px; }
  .brand span { font-size: 2rem; }
  pre { padding: 16px; }
}
@media (max-width: 370px) { .langsw button { min-width: 40px; padding-inline: 8px; } }

/* reduced motion, as on the homepage: nothing animates or transitions, scrolling jumps */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .langsw button[aria-pressed="true"], html[data-lang="en"] .langsw [data-set="en"], html[data-lang="de"] .langsw [data-set="de"] { outline: 2px solid Highlight; }
  .door, .note, pre { border-color: CanvasText; }
  ol.steps > li::before { border-color: CanvasText; }
}
@media print { .site-header, .toc, .doorway, .site-footer { display: none; } body { background: #fff; } }