/* The in-extension doc pages (user manual / release notes / privacy policy),
   rendered from Markdown at build time. This file used to carry a whole second
   palette (its own accent, ink, rule and code colours), which is why the doc
   pages never looked like the extension they shipped inside. It now defines no
   colours of its own: every value comes from ui.css, which is linked first. */

.doc-nav {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.doc-nav-inner {
  max-width: 760px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font: 13px/1.4 var(--sans);
}
.doc-nav a { color: var(--accent-strong); text-decoration: none; }
@media (prefers-color-scheme: dark) { .doc-nav a { color: var(--accent); } }
.doc-nav a:hover { text-decoration: underline; }
.doc-nav-home { font-weight: 600; color: var(--ink) !important; }
.doc-nav [aria-current="page"] { color: var(--ink) !important; font-weight: 600; }
.doc-nav-end { margin-left: auto; }

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 24px 88px;
  font-size: 15px;
  line-height: 1.65;
}
.doc h1 { font: 600 27px/1.2 var(--sans); letter-spacing: -.02em; margin: 0 0 .55em; }
.doc h2 {
  font: 600 19px/1.3 var(--sans); letter-spacing: -.01em;
  margin: 1.9em 0 .5em; padding-top: .55em; border-top: 1px solid var(--rule);
}
.doc h1 + h2, .doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font: 600 15.5px/1.35 var(--sans); margin: 1.5em 0 .4em; }
.doc h4 { font: 600 14px/1.35 var(--sans); margin: 1.3em 0 .3em; color: var(--ink-2); }
.doc p, .doc li { color: var(--ink); }
.doc a { color: var(--accent-strong); text-decoration: none; }
@media (prefers-color-scheme: dark) { .doc a { color: var(--accent); } }
.doc a:hover { text-decoration: underline; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li { margin: .3em 0; }
.doc li::marker { color: var(--ink-2); }
.doc strong { font-weight: 600; }
.doc blockquote {
  margin: 1.1em 0; padding: .5em 1em; color: var(--ink-2);
  border-left: var(--rail) solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
  background: var(--card);
}
.doc code {
  font: .88em/1.5 var(--mono);
  background: var(--sunken); border: 1px solid var(--rule);
  padding: .1em .35em; border-radius: var(--r-sm);
}
.doc pre {
  background: var(--card); padding: 14px 16px; border-radius: var(--r);
  overflow-x: auto; border: 1px solid var(--rule);
}
.doc pre code { background: none; border: 0; padding: 0; }
.doc table {
  border-collapse: collapse; width: 100%; margin: 1.1em 0; font-size: .95em;
  display: block; overflow-x: auto;
}
.doc th, .doc td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; }
.doc th { background: var(--sunken); font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2em 0; }
.doc img { max-width: 100%; }

/* Long paths, folder names and file names read as data here too. */
.doc kbd {
  font: 500 .85em/1.6 var(--mono); color: var(--ink);
  background: var(--sunken); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); padding: 1px 5px;
}

@media (max-width: 620px) {
  .doc-nav-inner { padding: 12px 16px; gap: 12px; }
  .doc-nav-end { margin-left: 0; }
  .doc { padding: 24px 16px 56px; }
}