/* ==========================================================================
   tipod docs — "Paper"
   Shares the landing tokens; adds a three-column documentation shell.
   ========================================================================== */

:root {
  color-scheme: light;

  --ink: #20231f;
  --field: #f0f3ec;
  --mist: #dfe5dc;
  --muted: #758074;
  --lime: #d9fa82;

  --bg: #fff;
  --bg-subtle: var(--field);
  --border: var(--mist);
  --border-strong: #c4ccbf;
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --accent: var(--lime);
  --ok: #3f7d4c;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.5rem;
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.75rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --sidebar-w: 15.5rem;
  --toc-w: 13rem;
  --head-h: 3.5rem;

  --radius: 6px;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191c18;
  --bg-subtle: #20231f;
  --border: #333a30;
  --border-strong: #47503f;
  --fg: #e9ede3;
  --fg-muted: #9aa48e;
  --ok: #8fce9c;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }
::selection { background: var(--accent); color: var(--ink); }

a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--fg); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2rem; }
li { margin-bottom: var(--space-2); }

code { font-family: var(--font-mono); font-size: 0.875em; font-variant-ligatures: none; }
:not(pre) > code {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--fg); color: var(--bg);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius); text-decoration: none;
}
.skip:focus-visible { top: var(--space-4); box-shadow: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--head-h);
  padding-inline: var(--space-5);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: var(--fg);
}
.wordmark:hover { text-decoration: none; }
.wordmark .sub { color: var(--fg-muted); font-weight: 500; font-size: 0.9375rem; }
.topbar .spacer { flex: 1; }
.topbar nav { display: flex; gap: var(--space-5); font-size: 0.9375rem; }
.topbar nav a { color: var(--fg-muted); text-decoration: none; }
.topbar nav a:hover { color: var(--fg); }

.icon-btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--fg-muted); cursor: pointer;
}
.icon-btn:hover { color: var(--fg); border-color: var(--border-strong); }
.icon-btn svg { display: block; }
[data-theme="dark"] .icon-sun, .icon-moon { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
.sidebar-toggle { display: none; }

/* search trigger */
.search-trigger {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 12rem; padding: 0.35rem var(--space-3);
  font: inherit; font-size: 0.875rem; color: var(--fg-muted);
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: left;
}
.search-trigger:hover { border-color: var(--border-strong); }
.search-trigger .hint {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem;
  border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem;
}
@media (max-width: 60rem) {
  .search-trigger { min-width: 0; }
  .search-trigger .label, .search-trigger .hint { display: none; }
}

/* ---------- shell ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 0 var(--space-7);
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.sidebar, .toc {
  position: sticky; top: var(--head-h); align-self: start;
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding-block: var(--space-6) var(--space-7);
  font-size: 0.9375rem;
  scrollbar-width: thin;
}

.sidebar .group + .group { margin-top: var(--space-5); }
.sidebar .group-label {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted);
  margin: 0 0 var(--space-2); padding-left: var(--space-3);
}
.sidebar a {
  display: block; padding: 0.3rem var(--space-3);
  color: var(--fg-muted); text-decoration: none;
  border-left: 2px solid transparent; border-radius: 0 4px 4px 0;
}
.sidebar a:hover { color: var(--fg); background: var(--bg-subtle); }
.sidebar a[aria-current="true"] {
  color: var(--fg); font-weight: 500;
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.toc { border-left: 1px solid var(--border); padding-left: var(--space-5); font-size: 0.875rem; }
.toc-label {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted); margin: 0 0 var(--space-2);
}
.toc a { display: block; padding: 0.2rem 0; color: var(--fg-muted); text-decoration: none; }
.toc a:hover { color: var(--fg); }
.toc a[aria-current="true"] { color: var(--fg); font-weight: 500; }

/* ---------- content ---------- */
.content { padding-block: var(--space-6) var(--space-7); min-width: 0; }
.content > section { scroll-margin-top: calc(var(--head-h) + var(--space-4)); padding-bottom: var(--space-7); }

.page-head { padding-bottom: var(--space-6); }
.page-head h1 { font-size: var(--step-3); letter-spacing: -0.03em; margin: 0 0 var(--space-3); }
.page-head .deck { font-size: var(--step-1); color: var(--fg-muted); max-width: 42rem; margin: 0; }

.content h2 {
  font-size: var(--step-2);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.content h3 { font-size: 1.0625rem; margin: var(--space-6) 0 var(--space-3); }
.content h4 { font-size: 0.9375rem; margin: var(--space-5) 0 var(--space-2); color: var(--fg-muted); }
.content p, .content li { max-width: 44rem; }
.content .lede { font-size: var(--step-1); color: var(--fg-muted); }

/* heading permalinks */
.anchor {
  margin-left: 0.4rem; color: var(--fg-muted); text-decoration: none;
  font-weight: 400; opacity: 0; transition: opacity 0.15s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* ---------- code ---------- */
.terminal {
  position: relative;
  margin: var(--space-4) 0 var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle); overflow: hidden;
}
.terminal pre {
  margin: 0; padding: var(--space-4) var(--space-5);
  padding-right: 4.75rem;
  overflow-x: auto; scrollbar-width: thin;
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.85; tab-size: 2;
}
.prompt { color: var(--fg-muted); user-select: none; }
.comment, .out { color: var(--fg-muted); }
.out-ok { color: var(--ok); }

.copy-btn {
  position: absolute; top: var(--space-2); right: var(--space-2);
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--fg-muted); background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
}
.terminal:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--fg); }
.copy-btn[data-state="done"] { opacity: 1; color: var(--ok); border-color: var(--ok); }
@media (hover: none) { .copy-btn { opacity: 1; } }

/* ---------- tabs ---------- */
.tabs { margin: var(--space-4) 0 var(--space-5); }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.tabs__tab {
  appearance: none; background: none; border: 1px solid transparent; border-bottom: 0;
  padding: var(--space-2) var(--space-4); margin-bottom: -1px;
  font: inherit; font-size: 0.875rem; color: var(--fg-muted);
  cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; position: relative;
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab[aria-selected="true"] { color: var(--fg); border-color: var(--border); background: var(--bg-subtle); }
.tabs__tab[aria-selected="true"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: var(--bg-subtle);
}
.tabs__panel[hidden] { display: none; }
.tabs__panel > .terminal { margin-top: 0; border-top-left-radius: 0; }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); scrollbar-width: thin; }
table.ref {
  width: 100%; border-collapse: collapse; font-size: 0.9375rem;
}
table.ref th, table.ref td {
  text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border); vertical-align: baseline;
}
table.ref thead th {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted);
  border-bottom-color: var(--border-strong);
}
table.ref tbody th { font-weight: 400; white-space: nowrap; }
table.ref code { white-space: nowrap; }
table.ref td:last-child, table.ref th:last-child { padding-right: 0; }

/* ---------- callouts ---------- */
.callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--bg-subtle);
  font-size: 0.9375rem;
}
.callout--warn { border-left-color: #c9862a; }
.callout p { margin-bottom: var(--space-2); }
.callout :last-child { margin-bottom: 0; }
.callout-title { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) 0; font-weight: 500; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--font-mono); color: var(--fg-muted); }
.faq details[open] summary::before { content: "\2013"; }
.faq .answer { padding: 0 0 var(--space-4) 1.6rem; color: var(--fg-muted); }
.faq .answer :last-child { margin-bottom: 0; }

/* ---------- search dialog ---------- */
.search-dialog {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(28rem, 80vh);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.22);
  overflow: hidden;
}
.search-dialog::backdrop { background: rgb(32 35 31 / 0.4); backdrop-filter: blur(2px); }
.search-dialog form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.search-dialog input {
  flex: 1; border: 0; background: none; color: var(--fg);
  font: inherit; font-size: var(--step-1);
}
.search-dialog input:focus { outline: none; }
.search-results { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; max-height: 20rem; }
.search-results li { margin: 0; }
.search-results a {
  display: block; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); text-decoration: none; color: var(--fg);
}
.search-results a:hover, .search-results a[data-active="true"] { background: var(--bg-subtle); }
.search-results .r-group { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.search-empty { padding: var(--space-5); color: var(--fg-muted); font-size: 0.9375rem; }

/* ---------- footer ---------- */
.content-foot {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between;
  font-size: 0.875rem; color: var(--fg-muted);
}
.content-foot a { color: var(--fg-muted); text-decoration: none; }
.content-foot a:hover { color: var(--fg); }

/* ---------- responsive ---------- */
@media (max-width: 72rem) {
  .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: 0 var(--space-6); }
  .toc { display: none; }
}
@media (max-width: 54rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar-toggle { display: grid; }
  /* Home and Dashboard stay reachable from the sidebar and page footer. */
  .topbar nav { display: none; }
  .topbar { padding-inline: var(--space-4); gap: var(--space-3); }
  .sidebar {
    position: fixed; inset: var(--head-h) auto 0 0; z-index: 25;
    width: min(18rem, 82vw); max-height: none;
    padding: var(--space-5);
    background: var(--bg); border-right: 1px solid var(--border);
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .sidebar[data-open="true"] { transform: none; box-shadow: 0 0 40px rgb(0 0 0 / 0.18); }
  .scrim {
    position: fixed; inset: var(--head-h) 0 0; z-index: 24;
    background: rgb(32 35 31 / 0.35);
  }
  .scrim[hidden] { display: none; }
}