/* River — the Documentation, on top of common.css. The pages are Privacy's:
   the light page theme (body.page), its type and its rules between topics,
   with the contents beside the article. Everything here is what the help
   vault's notes have that Privacy doesn't — nested lists, keycaps, tables,
   callouts, screenshots — drawn from the same tokens.

   Generated by scripts/build-docs.py from scripts/docs/page.html; the
   class names are that writer's. */

body.docs {
  --docs-nav-w: 240px;
  --docs-well: #CFCBC3;               /* a step down from the ground: the .clip well */
  --docs-raised: rgba(255, 255, 255, 0.42);
  --docs-raised-hover: rgba(255, 255, 255, 0.7);
  --docs-tint: rgba(44, 42, 39, 0.07); /* code, the current page */
  --docs-violet: #5B4BB8;             /* Midnight's tertiary, darkened to hold on stone */
  --docs-amber: #8A6200;
  --docs-red: #8A3B2E;                /* the beta form's error ink */
}

/* ---------- layout: the contents beside the article ---------- */
.docs-layout {
  display: grid; grid-template-columns: var(--docs-nav-w) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
  max-width: calc(var(--docs-nav-w) + 64px + 720px + 40px); margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.docs .page-main.docs-main { padding: clamp(24px, 6vh, 64px) 0 0; }
.docs-main article { max-width: 720px; margin: 0; }

/* ---------- the contents ----------
   A <details> open beside the page; on a narrow window it folds away above
   the article, under a capsule like the bar's. */
.docs-nav {
  position: sticky; top: calc(var(--bar-h) + 16px);
  max-height: calc(100vh - var(--bar-h) - 32px); overflow-y: auto;
  margin-top: clamp(24px, 6vh, 64px); padding: 4px 4px 24px 0;
  font-size: 15px;
  overscroll-behavior: contain;
}
.docs-nav > summary { display: none; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav ul ul { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--page-rule); }
.docs-nav li > ul { display: none; }
.docs-nav li.open > ul, .docs-nav li.current > ul { display: block; }
.docs-nav .nav-root > li > a { font-weight: 600; }
.docs-nav a {
  display: block; padding: 4px 10px; border-radius: 8px;
  color: var(--page-dim); text-decoration: none; line-height: 1.35;
  transition: color 0.2s, background 0.2s;
}
.docs-nav a:hover { color: var(--page-ink); }
.docs-nav a[aria-current="page"] { color: var(--page-ink); background: var(--docs-tint); font-weight: 600; }

@media (max-width: 899px) {
  .docs-layout { display: block; }
  .docs-nav {
    position: static; max-height: none; overflow: visible;
    margin: clamp(16px, 4vh, 32px) 0 0; padding: 0;
  }
  .docs-nav > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    padding: 7px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.45); border: 1px solid var(--page-rule);
    font-size: 16px; font-weight: 600; color: var(--page-ink);
  }
  .docs-nav > summary::-webkit-details-marker { display: none; }
  .docs-nav > summary::after { content: "▾"; font-size: 12px; color: var(--page-dim); transition: transform 0.2s; }
  .docs-nav[open] > summary::after { transform: rotate(180deg); }
  .docs-nav > nav {
    margin-top: 10px; padding: 12px; border-radius: 14px;
    background: var(--docs-raised); border: 1px solid var(--page-rule);
  }
}

/* ---------- the page's head ---------- */
.breadcrumbs { margin: 0 0 10px; font-size: 14px; color: var(--page-dim); min-height: 1.3em; }
.breadcrumbs a { color: var(--page-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--page-accent); }
.breadcrumbs .sep { margin: 0 0.5em; opacity: 0.5; }

/* ---------- the note: Privacy's type, and what Privacy doesn't have ----------
   A note's sections are its h2s, so they take the rule Privacy's topics
   have above them. */
.docs-content h2, .docs-children h2 {
  margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--page-rule);
}
.docs-content h3 { margin: 24px 0 8px; font-weight: 600; font-size: 18px; color: var(--page-ink); }
.docs-content h4 { margin: 20px 0 6px; font-weight: 600; font-size: 16px; color: var(--page-dim); }
.docs-content > :first-child { margin-top: 0; }

.docs-content ul, .docs-content ol {
  margin: 0 0 14px; padding-left: 1.3em; max-width: 40em;
  font-size: 17px; line-height: 1.6; color: var(--page-dim);
}
.docs-content li { margin: 4px 0; }
.docs-content li > ul, .docs-content li > ol { margin: 4px 0 6px; font-size: inherit; }
.docs-content li::marker { color: rgba(44, 42, 39, 0.4); }
.docs-content strong { font-weight: 600; color: var(--page-ink); }
.docs-content a:not(.external) { text-underline-offset: 2px; text-decoration-thickness: 1px; }
.docs-content a.external::after { content: " ↗"; font-size: 0.8em; }
.broken-link { border-bottom: 1px dashed currentColor; }
.docs-content mark { background: rgba(35, 117, 109, 0.18); color: inherit; padding: 0 0.15em; border-radius: 3px; }
.docs-content hr { border: 0; border-top: 1px solid var(--page-rule); margin: 32px 0; }
.docs-content blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--page-rule); }

.docs-content code, .docs-content pre, .docs-content kbd { font-family: var(--mono); font-size: 0.86em; }
.docs-content code { background: var(--docs-tint); padding: 0.1em 0.35em; border-radius: 4px; color: var(--page-ink); }
.docs-content pre { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--docs-tint); overflow-x: auto; }
.docs-content pre code { background: none; padding: 0; }
/* A keycap: the app's {{⌘Z}}. */
.docs-content kbd {
  display: inline-block; min-width: 1.7em; padding: 0.05em 0.45em;
  text-align: center; line-height: 1.45; color: var(--page-ink);
  background: var(--docs-raised-hover);
  border: 1px solid var(--page-rule); border-bottom-width: 2px; border-radius: 6px;
}

.table-wrap { margin: 0 0 14px; overflow-x: auto; }
.docs-content table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; color: var(--page-dim); }
.docs-content th, .docs-content td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--page-rule); }
.docs-content th { font-weight: 600; color: var(--page-ink); }

/* Callouts: Obsidian's > [!tip], on a raised card with its colour down the side. */
.callout {
  --callout: var(--page-accent);
  margin: 0 0 14px; padding: 14px 18px; border-radius: 14px;
  background: var(--docs-raised); border: 1px solid var(--page-rule); border-left: 3px solid var(--callout);
}
.callout > :last-child { margin-bottom: 0; }
.page-main .callout-title { margin: 0 0 4px; font-weight: 600; color: var(--callout); }
.callout-note, .callout-info { --callout: var(--docs-violet); }
.callout-warning, .callout-caution { --callout: var(--docs-amber); }
.callout-danger, .callout-error { --callout: var(--docs-red); }
.callout-todo { --callout: var(--page-dim); }

/* ---------- screenshots: the home page's clips, on stone ---------- */
.screenshot { margin: 0 0 32px; }
.screenshot img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; border: 1px solid var(--page-rule);
  box-shadow: 0 18px 40px -24px rgba(44, 42, 39, 0.45);
}
img.inline { max-width: 100%; height: auto; border-radius: 8px; vertical-align: middle; }
.screenshot figcaption { margin-top: 8px; font-size: 14px; color: var(--page-dim); }
/* Only with --placeholders: the shape it'll take, naming the file it wants. */
.screenshot.placeholder {
  display: grid; place-content: center; gap: 4px; text-align: center;
  aspect-ratio: 2420 / 1668; border-radius: 14px;
  background: var(--docs-well); border: 1px solid var(--page-rule);
  color: var(--page-dim);
}
.placeholder-label { font-weight: 600; }
.placeholder-name { font-family: var(--mono); font-size: 13px; }

/* ---------- in this section, and previous / next ---------- */
.docs-children ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.docs-children a, .docs-pager a {
  display: grid; gap: 2px; height: 100%;
  padding: 14px 16px; border-radius: 14px;
  background: var(--docs-raised); border: 1px solid var(--page-rule);
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.docs-children a:hover, .docs-pager a:hover { background: var(--docs-raised-hover); border-color: rgba(35, 117, 109, 0.35); }
.child-title { font-weight: 600; color: var(--page-accent); }
.child-summary { font-size: 15px; line-height: 1.45; color: var(--page-dim); }

.docs-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--page-rule);
}
.docs-pager a { font-weight: 600; color: var(--page-accent); }
.docs-pager .next { text-align: right; grid-column: 2; }
.docs-pager .dir { font-size: 13px; font-weight: 500; color: var(--page-dim); }
@media (max-width: 520px) {
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager .next { grid-column: 1; }
  .docs-pager > span:empty { display: none; }
}

/* A heading arrived at by a link: lit briefly. */
.docs-content :target { animation: docs-target 1.6s ease-out; border-radius: 4px; }
@keyframes docs-target {
  from { background: rgba(35, 117, 109, 0.16); }
  to   { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .docs-content :target { animation: none; } }