/* Help site styles. Colour tokens come from generated/tokens.css (the
   app's globals.css :root/.dark blocks), so light/dark and any brand
   palette match the app exactly. Ramps: ink (chrome), plume (links,
   focus), trinket (highlights). */

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

html { color-scheme: light; }
html.dark { color-scheme: dark; }

body {
  margin: 0;
  background: rgb(var(--canvas));
  color: rgb(var(--ink-800));
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

a { color: rgb(var(--plume-700)); text-underline-offset: 2px; }
a:hover { color: rgb(var(--plume-800)); }
:focus-visible { outline: 2px solid rgb(var(--plume-500)); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { color: rgb(var(--ink-900)); line-height: 1.25; }
h1 { font-family: Fraunces, ui-serif, Georgia, serif; font-size: 2rem; margin: 0 0 .5rem; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; z-index: 50; background: rgb(var(--surface)); padding: 8px 12px; }

/* Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgb(var(--surface));
  border-bottom: 1px solid rgb(var(--ink-100));
}
.header-row { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 8px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: rgb(var(--ink-900)); }
.brand img { height: 32px; width: auto; }
.brand-help { font-weight: 600; color: rgb(var(--ink-500)); border-left: 1px solid rgb(var(--ink-200)); padding-left: 8px; }
.header-links { display: flex; gap: 16px; align-items: center; margin-left: auto; font-size: .875rem; }
.app-link {
  background: rgb(var(--plume-500)); color: rgb(var(--oncolor));
  padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.app-link:hover { background: rgb(var(--plume-600)); color: rgb(var(--oncolor)); }

.section-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; font-size: .875rem; }
.section-nav a {
  white-space: nowrap; padding: 4px 10px; border-radius: 8px;
  color: rgb(var(--ink-600)); text-decoration: none; font-weight: 500;
}
.section-nav a:hover { background: rgb(var(--ink-50)); color: rgb(var(--ink-900)); }
.section-nav a[aria-current="page"] { background: rgb(var(--plume-50)); color: rgb(var(--plume-800)); }

/* Search ------------------------------------------------------------- */
.docs-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.docs-search-field { position: relative; display: flex; align-items: center; }
.docs-search-icon { position: absolute; left: 10px; color: rgb(var(--ink-400)); }
.docs-search input {
  width: 100%; padding: 8px 36px; border-radius: 10px; font: inherit; font-size: .9rem;
  border: 1px solid rgb(var(--ink-200)); background: rgb(var(--canvas)); color: rgb(var(--ink-900));
}
.docs-search-kbd {
  position: absolute; right: 8px; font: 12px ui-monospace, monospace; color: rgb(var(--ink-400));
  border: 1px solid rgb(var(--ink-200)); border-radius: 4px; padding: 0 5px;
}
.docs-search-results {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  max-height: 70vh; overflow-y: auto; background: rgb(var(--surface));
  border: 1px solid rgb(var(--ink-100)); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / .14);
}
.docs-search-results.is-open { display: block; }
.docs-search-hit { display: block; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid rgb(var(--ink-100)); }
.docs-search-hit:last-child { border-bottom: 0; }
.docs-search-hit:hover, .docs-search-hit.is-active { background: rgb(var(--plume-50)); }
.docs-search-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--ink-400)); }
.docs-search-title { font-weight: 600; color: rgb(var(--ink-900)); }
.docs-search-snippet { font-size: .85rem; color: rgb(var(--ink-500)); }
.docs-search-snippet mark { background: rgb(var(--trinket-100)); color: inherit; border-radius: 2px; }
.docs-search-empty { padding: 12px 14px; color: rgb(var(--ink-500)); font-size: .9rem; }

/* Pages -------------------------------------------------------------- */
.page-shell { padding-top: 32px; padding-bottom: 64px; min-height: 60vh; }
.lede { font-size: 1.1rem; color: rgb(var(--ink-500)); margin: 0 0 1.5rem; max-width: 70ch; }
.back-link { font-size: .875rem; text-decoration: none; }

.home-hero { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.home-hero img { width: 96px; height: auto; flex-shrink: 0; }

.card-grid, .card-list, .link-list { list-style: none; padding: 0; margin: 0; }
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card-list { display: grid; gap: 12px; max-width: 760px; }
.card {
  display: block; background: rgb(var(--surface)); border: 1px solid rgb(var(--ink-100));
  border-radius: 14px; padding: 16px 18px; text-decoration: none; color: inherit;
}
a.card:hover { border-color: rgb(var(--plume-300)); }
.card-title { display: block; font-weight: 600; font-size: 1.05rem; color: rgb(var(--ink-900)); text-decoration: none; }
.card-body { display: block; color: rgb(var(--ink-500)); font-size: .9rem; margin: 4px 0 8px; }
.link-list li { margin: 4px 0; font-size: .9rem; }
.link-list a[aria-current="page"] { font-weight: 600; color: rgb(var(--ink-900)); text-decoration: none; }

.article-head { margin-bottom: 8px; }
.article-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
.article-side { position: sticky; top: 140px; display: grid; gap: 16px; }
.side-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--ink-100)); border-radius: 12px; padding: 14px 16px; }
.side-card h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--ink-500)); margin: 0 0 8px; }
.side-card nav ul { list-style: none; padding-left: 0; margin: 0; font-size: .9rem; }
.side-card nav ul ul { padding-left: 12px; }
.side-card nav li { margin: 4px 0; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; font-size: 1.35rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.prose li { margin: .25rem 0; }
.prose code { font: .9em ui-monospace, monospace; background: rgb(var(--ink-50)); padding: 1px 5px; border-radius: 4px; }
.prose kbd {
  font: .85em ui-monospace, monospace; border: 1px solid rgb(var(--ink-200));
  border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: rgb(var(--surface));
}
.prose blockquote {
  margin: 1rem 0; padding: 10px 16px; border-left: 4px solid rgb(var(--trinket-500));
  background: rgb(var(--trinket-100)); border-radius: 0 8px 8px 0; color: rgb(var(--ink-800));
}
.prose blockquote p { margin: .25rem 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 1rem 0; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgb(var(--ink-100)); vertical-align: top; }
.prose thead th { color: rgb(var(--ink-500)); font-weight: 600; }

.site-footer { border-top: 1px solid rgb(var(--ink-100)); padding: 20px 0; font-size: .875rem; color: rgb(var(--ink-500)); }

@media (max-width: 860px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; }
  h1 { font-size: 1.6rem; }
  .home-hero img { width: 72px; }
}