/* revq documentation site. Same ink, paper, highlighter and typefaces as the app. */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("fonts/commit-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: light-dark(#f6f7fa, #10131c);
  --slip: light-dark(#ffffff, #191d2a);
  --ink: light-dark(#151a2d, #e8eaf2);
  --ink-2: light-dark(#555c73, #a2a9be);
  --rule: light-dark(#dcdfe8, #2b3144);
  --wash: light-dark(#eceef4, #222739);
  --hl: #ffe45c;
  --hl-ink: #151a2d;
  --pencil: light-dark(#2747c7, #93a8ff);
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Commit Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.6 var(--sans); }
a { color: var(--pencil); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1120px; margin: 0 auto; }

.side { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; padding: 32px 24px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; margin-bottom: 28px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li a { display: block; padding: 6px 10px; margin: 1px -10px; border-radius: 4px; color: var(--ink-2); text-decoration: none; font-weight: 550; font-size: 0.9375rem; }
.side li a:hover { color: var(--ink); background: var(--wash); }
.side li a[aria-current] { color: var(--hl-ink); background: var(--hl); }
.side .repo { margin-top: auto; padding-top: 24px; font-size: 0.875rem; color: var(--ink-2); }

.doc { padding: 44px 48px 120px; max-width: 800px; overflow-wrap: anywhere; }
.doc h1 { font-size: 2.5rem; font-weight: 750; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; text-wrap: balance; }
.doc h1 + p { font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.doc h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; margin: 56px 0 12px; padding-top: 28px; border-top: 1px solid var(--rule); scroll-margin-top: 8px; }
.doc h3 { font-size: 1.0625rem; font-weight: 700; margin: 30px 0 6px; scroll-margin-top: 16px; }
.doc p, .doc li { max-width: 68ch; }
.doc p { margin: 10px 0; text-wrap: pretty; }
.doc ul, .doc ol { padding-left: 24px; margin: 8px 0; }
.doc li { margin: 6px 0; }
.doc code { font-family: var(--mono); font-size: 0.8125rem; background: var(--wash); padding: 2px 6px; border-radius: 3px; }
.doc pre { background: var(--slip); border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; overflow-x: auto; margin: 14px 0; }
.doc pre code { background: none; padding: 0; font-size: 0.875rem; line-height: 1.6; overflow-wrap: normal; }
.doc table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 0.9375rem; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 12px; border: 1px solid var(--rule); overflow-wrap: normal; }
.doc th { background: var(--wash); font-weight: 650; }
.doc strong { font-weight: 700; }

@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 20px 16px; }
  .brand { margin-bottom: 14px; }
  .side ul { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .side li a { margin: 0; }
  .side .repo { padding-top: 14px; }
  .doc { padding: 28px 16px 80px; }
  .doc h1 { font-size: 2rem; }
}

.doc img { display: block; max-width: 100%; height: auto; margin: 18px 0; border: 1px solid var(--rule); border-radius: 8px; }
.doc p:has(> img) { max-width: none; }