/* The docs, a site of their own (10-11, src/views/docs-hub.js, public/docs.js). Mintlify's layout, as docs.anthropic.com and
   docs.cursor.com have it: a bar on top (mark and Docs, the search in the middle, Open EarthOnline), the guides on the left,
   one page in the middle (720 wide), its outline ("On this page") on the right; on a phone the guides are a drawer behind the
   bar's menu button and the outline is gone. Loaded on the docs' pages only. Colours, sizes and radii are ui.css's tokens;
   the controls (.btn) are ui.css's. Hover: a row takes one step of ground, a label only its colour (taste). */

.docs { min-height: 100vh; background: var(--bg); color: var(--fg); }
.docs :is(h1, h2, p, ul, ol) { margin-block: 0; }

/* ---- the bar ---------------------------------------------------------------------------------------------------------- */
.dx-top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.dx-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 56px; max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.dx-brand { display: flex; align-items: center; gap: 8px; flex: none; color: var(--fg); text-decoration: none; white-space: nowrap; }
.dx-brand span { display: flex; align-items: baseline; gap: 8px; font-size: var(--text-lg); line-height: 1; }
.dx-brand b { font-weight: 600; }
.dx-brand i { font-style: normal; font-weight: 400; color: var(--muted); }
.dx-search { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; width: min(420px, 34vw); height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); text-align: left; cursor: pointer; }
.dx-search:hover { background: var(--bg3); }
.dx-search svg { flex: none; }
.dx-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--muted); font: 500 var(--text-xs)/var(--lh-xs) var(--font); white-space: nowrap; }
.dx-end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.dx-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font: 500 var(--text-sm)/var(--lh-sm) var(--font); cursor: pointer; }
.dx-icon:hover { background: var(--bg2); color: var(--fg); }
.dx-icon[aria-current] { display: none; }
.dx-search-btn, .dx-menu-btn { display: none; }
.dx-open { margin-left: 8px; }

/* ---- the three columns -------------------------------------------------------------------------------------------------- */
.dx-shell { display: grid; grid-template-columns: 248px minmax(0, 720px) 224px; justify-content: center; gap: 56px; max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.dx-nav { position: sticky; top: 56px; align-self: start; display: flex; flex-direction: column; gap: 2px; height: calc(100vh - 56px); padding: 32px 0; overflow-y: auto; }
.dx-nav a { display: block; padding: 6px 12px; border-radius: var(--radius); color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); text-decoration: none; }
.dx-nav a:hover { background: var(--bg2); color: var(--fg); }
.dx-nav a[aria-current] { background: var(--bg2); color: var(--fg); font-weight: 600; }
.dx-scrim { display: none; }
.dx-nav .dx-nav-open { display: none; }

.dx-main { min-width: 0; padding: 40px 0 96px; }
.dx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dx-title { font: 600 var(--text-4xl)/var(--lh-4xl) var(--font); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.docs-copy { flex: none; }
.docs-copy pre[hidden] { display: none; }

.dx-toc { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); padding: 40px 0 32px; overflow-y: auto; }
.dx-toc[hidden] { display: none; }
.dx-toc-title { margin-bottom: 8px; color: var(--fg); font: 600 var(--text-sm)/var(--lh-sm) var(--font); }
.dx-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.dx-toc a { display: block; margin-left: -1px; padding: 4px 0 4px 12px; border-left: 1px solid transparent; color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); text-decoration: none; }
.dx-toc li.is-sub a { padding-left: 24px; }
.dx-toc a:hover { color: var(--fg); }
.dx-toc a[aria-current] { border-left-color: var(--fg); color: var(--fg); }

/* ---- the page's text: the posts' rhythm (share.css .markdown; 44-detail-standards §4): 16 between blocks, 6 between a
   list's items, a subheading 40 above its part and 12 under it ---- */
.docs-body { margin-top: 16px; overflow-wrap: anywhere; font: 400 var(--text-base)/1.7 var(--font); }
.docs-body > p { margin: 16px 0 0; text-wrap: pretty; }
.docs-body > h2 { margin: 40px 0 0; scroll-margin-top: 80px; font: 600 var(--text-2xl)/var(--lh-2xl) var(--font); letter-spacing: var(--tracking-tight); }
.docs-body > .docs-agent-start { margin: 16px 0 0; padding: 12px 16px; border: 1px solid rgba(127,127,127,.3); border-radius: 8px; font-size: .9em; line-height: 1.6; }
.docs-agent-start p { margin: 0 0 4px; }
.docs-agent-start ol { margin: 0; padding-left: 20px; }
.docs-agent-start code { overflow-wrap: anywhere; }
.docs-body > ol, .docs-body > ul { margin: 16px 0 0; padding-left: 24px; }
.docs-body > h2 + :is(p, ol, ul) { margin-top: 12px; }
.docs-body li { padding-left: 4px; text-wrap: pretty; }
.docs-body li + li { margin-top: 6px; }
.docs-body li::marker { color: var(--muted); }
.docs-body > .give { margin-top: 24px; }
.docs-body > h2 + .give { margin-top: 16px; }
.docs-body > .give + .give { margin-top: 20px; }
/* the embed guide (embed.css) inside the page: its own room is the page's */
.docs-body > .eg { padding: 0; }
.docs-body > .eg > .eg-agent { margin-top: 24px; }

/* ---- previous and next ---- */
.dx-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.dx-pager a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-box); color: var(--fg); font: 500 var(--text-base)/var(--lh-base) var(--font); text-decoration: none; }
.dx-pager a:hover { background: var(--bg2); }
.dx-pager small { display: block; color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); }
.dx-pager svg { flex: none; color: var(--muted); }
.dx-next { grid-column: 2; justify-content: space-between; }

/* ---- the search: a box over the page, there at once (no fade, no scale; taste) ---- */
.dx-find[hidden] { display: none; }
.dx-find { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.dx-find-scrim { position: absolute; inset: 0; background: var(--scrim); }
.dx-find-box { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(560px, 76vh); border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--bg); overflow: hidden; }
.dx-find-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; flex: none; border-bottom: 1px solid var(--line); color: var(--muted); }
.docs .dx-find-field input, .docs .dx-find-field input:focus, .docs .dx-find-field input:focus-visible { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--fg); font: 400 var(--text-base)/var(--lh-base) var(--font); -webkit-appearance: none; appearance: none; }
.dx-find-field input::placeholder { color: var(--muted); }
.dx-find-field input::-webkit-search-cancel-button { display: none; }
.dx-find-list { padding: 8px; overflow-y: auto; }
.dx-find-label { padding: 6px 12px 4px; color: var(--muted); font: 500 var(--text-xs)/var(--lh-xs) var(--font); }
.dx-find-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.dx-find-row[aria-selected] { background: var(--bg2); }
.dx-find-title { font: 500 var(--text-sm)/var(--lh-sm) var(--font); }
.dx-find-page { color: var(--muted); font: 400 var(--text-xs)/var(--lh-xs) var(--font); }
.dx-find-snippet { color: var(--muted); font: 400 var(--text-sm)/var(--lh-sm) var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.docs mark { background: transparent; color: var(--fg); font-weight: 600; }
.dx-find-none { padding: 32px 12px; color: var(--muted); text-align: center; font: 400 var(--text-sm)/var(--lh-sm) var(--font); overflow-wrap: anywhere; }

/* ---- narrower windows ---- */
@media (max-width: 1180px) {
  .dx-shell { grid-template-columns: 232px minmax(0, 720px); gap: 48px; }
  .dx-toc { display: none; }
}
@media (max-width: 860px) {
  .dx-bar { gap: 8px; padding: 0 16px; }
  .dx-menu-btn { display: inline-flex; margin-left: -8px; }
  .dx-search { display: none; }
  .dx-search-btn { display: inline-flex; }
  .dx-open { display: none; }
  .dx-brand i { display: none; }
  .dx-shell { display: block; padding: 0 16px; }
  /* the guides: a drawer from the left under the bar */
  .dx-nav { position: fixed; z-index: 40; top: 56px; left: 0; bottom: 0; width: min(288px, 84vw); height: calc(100dvh - 56px); padding: 16px 12px; border-right: 1px solid var(--line); background: var(--bg); transform: translateX(-100%); visibility: hidden; }
  [data-menu-open] .dx-nav { transform: none; visibility: visible; }
  [data-menu-open] .dx-scrim { display: block; position: fixed; z-index: 35; inset: 56px 0 0; background: var(--scrim); }
  .dx-nav .dx-nav-open { display: block; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); border-radius: 0; }
  .dx-main { padding: 24px 0 64px; }
  .dx-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .dx-head { flex-direction: column; gap: 12px; }
  .dx-pager { grid-template-columns: 1fr; margin-top: 48px; }
  .dx-next { grid-column: 1; }
  .dx-find { padding-top: 56px; }
}