/* docs.agentwork.id · the landing's look (apps/landing/src/landing.css) for reading: light grey paper, black type, violet
   for links and section marks, lime only behind black text. Bebas Neue for the page title, JetBrains Mono for the rest.
   Square corners, 1px lines, no shadows. Three columns on a wide screen (sections · page · on this page), one on a phone. */
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bebas-neue-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bebas-neue-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/jetbrains-mono-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/jetbrains-mono-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; }

:root {
  color-scheme: light;
  --bg: #EFEFEC; --bg-2: #E6E6E2; --panel: #F8F8F6; --ink: #0B0B0C; --ink-2: #3B3B42; --ink-3: #5A5A62; --line: #D3D3CE; --line-2: #B9B9B3;
  --sig: #7A4CFF; --sig-ink: #5B2EE0; --sig-wash: #ECE6FF; --lime: #D6F84A; --ok: #3B7512; --warn: #A65400;
  --disp: "Bebas Neue", "Oswald", Impact, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --top: 64px; --gut: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.7 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; }
a { color: var(--sig-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: #fff; padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 40; height: var(--top); background: var(--bg); border-bottom: 1px solid var(--line-2); }
.top-in { height: 100%; display: flex; align-items: center; gap: 16px; padding-inline: var(--gut) var(--gut-r); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font: 800 17px/1 var(--mono); letter-spacing: -.02em; flex: none; }
.brand svg { width: 32px; height: 32px; }
.brand em { font: 400 22px/1 var(--disp); letter-spacing: .02em; font-style: normal; padding: 4px 8px 2px; background: var(--lime); color: var(--ink); }
.cur { color: var(--sig); }
.search { position: relative; flex: 1 1 auto; max-width: 420px; margin-left: auto; }
.search input { width: 100%; min-height: 40px; padding: 0 40px 0 12px; border: 1px solid var(--line-2); border-radius: 0; background: var(--panel); font-size: 14px; }
.search input:focus { border-color: var(--sig-ink); outline: none; box-shadow: 0 0 0 1px var(--sig-ink); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 22px; padding: 1px 6px; border: 1px solid var(--line-2); font: 600 11px/18px var(--mono); color: var(--ink-3); text-align: center; pointer-events: none; }
.search ul { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: min(70vh, 480px); overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--ink); box-shadow: 5px 5px 0 var(--sig); }
.search li a { display: block; padding: 9px 10px; color: var(--ink); text-decoration: none; }
.search li a small { display: block; color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.search li a b { font-weight: 700; }
.search li[aria-selected="true"] a, .search li a:hover { background: var(--sig-wash); }
.search li.empty { padding: 10px; color: var(--ink-3); }
.top-r { display: flex; align-items: center; gap: 10px; flex: none; }
.lang { display: flex; border: 1px solid var(--line-2); }
.lang a { display: grid; place-items: center; min-width: 44px; min-height: 40px; font: 700 11.5px/1 var(--mono); color: var(--ink-3); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font: 600 12px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--sig-ink); }
.menu-btn, .menu-close { display: none; }

/* three columns */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) 220px; max-width: 1440px; margin: 0 auto; }
.sidenav { position: sticky; top: var(--top); align-self: start; height: calc(100vh - var(--top)); overflow-y: auto; padding: 28px 18px 40px var(--gut); border-right: 1px solid var(--line); }
.nav-h { margin: 22px 0 8px; font: 700 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nav-h:first-of-type { margin-top: 0; }
.sidenav ul, .toc ul { margin: 0; padding: 0; list-style: none; }
.sidenav li a { display: block; padding: 7px 10px; margin-left: -10px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.sidenav li a:hover { color: var(--ink); background: var(--bg-2); }
.sidenav li a[aria-current="page"] { color: var(--ink); font-weight: 700; border-left-color: var(--sig); background: var(--sig-wash); }
.nav-foot { margin-top: 28px; font-size: 13px; }
.toc { position: sticky; top: var(--top); align-self: start; padding: 28px var(--gut-r) 40px 18px; font-size: 12.5px; }
.toc li a { display: block; padding: 4px 0; color: var(--ink-3); text-decoration: none; line-height: 1.4; }
.toc li a:hover, .toc li a.on { color: var(--sig-ink); }
.toc .toc-3 a { padding-left: 12px; }

/* the page */
.doc { min-width: 0; padding: 36px clamp(20px, 4vw, 56px) 48px; }
.doc article { max-width: 760px; }
.eyebrow { margin: 0 0 10px; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sig-ink); }
.doc h1 { margin: 0; font: 400 clamp(44px, 6vw, 68px)/.92 var(--disp); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; overflow-wrap: anywhere; }
.lede { margin: 16px 0 28px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }
.doc h2 { margin: 44px 0 12px; padding-top: 18px; border-top: 1px solid var(--line-2); font: 700 21px/1.3 var(--mono); letter-spacing: -.01em; }
.doc h3 { margin: 28px 0 8px; font: 700 16px/1.4 var(--mono); }
.doc p, .doc li { max-width: 72ch; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--sig-ink); }
.doc strong { font-weight: 700; }
.doc code { padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--line); font-size: .9em; overflow-wrap: anywhere; }
.doc pre { padding: 14px 16px; background: var(--ink); color: #F1F1EE; overflow-x: auto; font-size: 13px; }
.doc pre code { padding: 0; background: none; border: 0; color: inherit; }
.doc blockquote { margin: 20px 0; padding: 12px 16px; border-left: 3px solid var(--sig); background: var(--sig-wash); }
.doc blockquote p { margin: 4px 0; }
.doc hr { border: 0; border-top: 1px solid var(--line-2); margin: 32px 0; }
.table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--line-2); background: var(--panel); }
.doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.doc th, .doc td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc th { font: 700 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--bg-2); }
.doc tr:last-child td { border-bottom: 0; }

/* cards: the team, the steps of a request, the features on the home page */
.doc .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.cards li { margin: 0; padding: 16px; max-width: none; background: var(--panel); border: 1px solid var(--line-2); }
.cards li::marker { content: none; }
.cards a { color: var(--ink); text-decoration: none; display: block; }
.cards a:hover b { color: var(--sig-ink); }
.cards b { display: block; font-weight: 700; margin-bottom: 4px; }
.cards span { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.cards img { display: block; width: 72px; height: 72px; object-fit: contain; margin-bottom: 10px; }
.cards .dept { display: inline-block; margin-bottom: 6px; padding: 2px 7px; font: 700 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--bg-2); color: var(--ink-2); }
.doc .steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 18px 52px; margin: 0; max-width: none; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -2px; width: 38px; height: 30px; display: grid; place-items: center; background: var(--ink); color: var(--lime); font: 700 12px/1 var(--mono); }
.steps > li::after { content: ""; position: absolute; left: 18px; top: 30px; bottom: 2px; width: 1px; background: var(--line-2); }
.steps > li:last-child::after { display: none; }
.steps b { display: block; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; margin-top: 48px; }
.pager a { display: block; padding: 14px 16px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); text-decoration: none; }
.pager a:hover { border-color: var(--ink); }
.pager .next { text-align: right; grid-column: 2; }
.pager small { display: block; color: var(--ink-3); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.pager span { font-weight: 700; }
.doc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; max-width: 760px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12px; }

/* narrower: no right column */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr); }
  .toc { display: none; }
}
/* phone and tablet: the sections become a drawer */
@media (max-width: 860px) {
  :root { --top: 112px; }
  .top { height: auto; }
  .top-in { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 10px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; order: 0; }
  .brand { order: 1; }
  .brand > span { display: none; }
  .top-r { order: 2; margin-left: auto; }
  .top-r .btn { display: none; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .search kbd { display: none; } /* no keyboard shortcut on a phone */
  .search input { padding-right: 12px; }
  .shell { display: block; }
  .sidenav { position: fixed; inset: 0 auto 0 0; z-index: 55; width: min(320px, 86vw); height: 100%; padding: 16px 20px 32px var(--gut); background: var(--bg); border-right: 1px solid var(--ink); box-shadow: 6px 0 0 var(--sig); transform: translateX(-105%); transition: transform .22s cubic-bezier(.23, 1, .32, 1); visibility: hidden; }
  body.nav-open .sidenav { transform: none; visibility: visible; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 50; background: rgba(11, 11, 12, .35); }
  .menu-close { display: inline-flex; align-items: center; min-height: 40px; margin-bottom: 14px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .doc { padding: 24px var(--gut-r) 40px var(--gut); }
  .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }
