/* ─────────────────────────────────────────────────────────────────────────────
   CogniPage documentation

   Loaded on top of brand.css + landing.css, so colours, fonts and the animated
   background come from there; this file only adds the manual's own furniture:
   the three-column reading layout, the contents rail, and the handful of
   editorial blocks (steps, callouts, key tables) that article bodies compose
   from. Everything is written against the shared custom properties, so light
   and dark both follow automatically.

   Writing a new article? You only need the classes under "Article body" and
   "Editorial blocks" below — the rest is applied by the layout templates.
   ───────────────────────────────────────────────────────────────────────── */

.docs-hub,
.docs-layout {
  --docs-side: 264px;
  --docs-toc: 210px;
  --docs-gap: 2.5rem;
}

/* The <symbol> sheet the section icons are drawn from: present in the
   document, never laid out. */
.docs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The filters set `hidden` on rows and blocks that also carry an explicit
   display, which would otherwise win against the UA's [hidden] rule. */
.docs-hub [hidden],
.docs-layout [hidden] { display: none !important; }

/* ── Shared: hero & lede ─────────────────────────────────────────────────── */

.docs-lede {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0.7rem 0 0;
}

/* ── Documentation hub (/docs) ───────────────────────────────────────────── */

.docs-hub {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.docs-hero { max-width: 720px; }
.docs-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.85rem 0 0;
}
.docs-hero__lede {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 0.8rem 0 0;
}

.docs-hub__search {
  position: relative;
  margin-top: 1.6rem;
  max-width: 560px;
}
.docs-hub__search svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.docs-hub__search input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
}
.docs-hub__search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.docs-hub__noresults { color: var(--muted); font-size: 0.9rem; margin: 0.9rem 0 0; }
.docs-hub__noresults a { color: var(--primary); font-weight: 600; }

/* Start-here strip */
.docs-start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 2.6rem 0 3.2rem;
}
.docs-start__card {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 1.4rem 1.3rem 1.3rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.docs-start__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: var(--shadow);
}
.docs-start__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.45rem;
}
.docs-start__card strong { font-size: 1.02rem; font-weight: 700; }
.docs-start__card span:last-child { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* Section cards */
.docs-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  gap: 1.4rem;
}
.docs-hub__card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.6rem 1.5rem;
}
.docs-hub__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.docs-hub__head h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.docs-hub__head p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.docs-hub__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.docs-hub__ic svg { width: 22px; height: 22px; }

.docs-hub__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.docs-hub__list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s;
}
.docs-hub__list a:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.docs-hub__list strong { font-size: 0.95rem; font-weight: 600; }
.docs-hub__list span { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }

.docs-hub__foot {
  margin-top: 2.6rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
}
.docs-hub__foot h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.docs-hub__foot p { color: var(--muted); line-height: 1.7; margin: 0; }
.docs-hub__foot a { color: var(--primary); font-weight: 600; }

/* ── Article layout (/docs/<slug>) ───────────────────────────────────────── */

.docs-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: var(--docs-side) minmax(0, 1fr);
  gap: var(--docs-gap);
  align-items: start;
}

.docs-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--docs-toc);
  gap: var(--docs-gap);
  align-items: start;
  min-width: 0;
}

/* Contents rail */
.docs-side { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.docs-side__inner { padding-right: 0.4rem; }
.docs-side__group + .docs-side__group { margin-top: 1.5rem; }
.docs-side__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-side__title svg { width: 15px; height: 15px; color: var(--primary); }
.docs-side__title--plain { padding-left: 0; }
.docs-side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.docs-side__link {
  display: block;
  padding: 0.42rem 0.7rem;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.45;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.docs-side__link:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-left-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.docs-side__link.is-current {
  color: var(--primary);
  font-weight: 700;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border-left-color: var(--primary);
}

.docs-filter { position: relative; margin-bottom: 1.3rem; }
.docs-filter__icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none;
}
.docs-filter input {
  width: 100%;
  padding: 0.55rem 0.7rem 0.55rem 2.2rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.86rem;
}
.docs-filter input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.docs-filter__empty { color: var(--muted); font-size: 0.85rem; margin: -0.6rem 0 1rem; }

/* Sits directly above the contents rail on narrow screens; the rail itself
   collapses to a panel this opens. */
.docs-side__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.2rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.docs-side__toggle svg { width: 17px; height: 17px; }

/* On-this-page rail */
.docs-toc { position: sticky; top: 90px; }
.docs-toc__title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.docs-toc a {
  display: block;
  padding: 0.25rem 0 0.25rem 0.8rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.83rem;
  line-height: 1.45;
  transition: color 0.15s, border-color 0.15s;
}
.docs-toc a:hover { color: var(--fg); }
.docs-toc a.is-active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }

/* ── Article body ────────────────────────────────────────────────────────── */

.docs-article { min-width: 0; max-width: 760px; }

.docs-crumbs { display: flex; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.9rem; }
.docs-crumbs a { color: var(--primary); font-weight: 600; text-decoration: none; }
.docs-crumbs a:hover { text-decoration: underline; }

.docs-article__head { padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.8rem; }
.docs-article__head h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}

.docs-body { font-size: 0.98rem; }
.docs-body > *:first-child { margin-top: 0; }
.docs-body p, .docs-body li { color: var(--muted); line-height: 1.75; }
.docs-body p { margin: 0 0 1rem; }
.docs-body strong { color: var(--fg); font-weight: 700; }
.docs-body a { color: var(--primary); font-weight: 600; }

.docs-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.6rem 0 0.8rem;
  scroll-margin-top: 96px;
}
.docs-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.7rem 0 0.5rem;
  scroll-margin-top: 96px;
}

.docs-body ul, .docs-body ol { margin: 0 0 1.1rem; padding-left: 1.25rem; display: grid; gap: 0.42rem; }
.docs-body li > ul, .docs-body li > ol { margin: 0.42rem 0 0; }

.docs-body code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  padding: 0.12em 0.42em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--fg);
}
.docs-body pre {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--fg) 5%, var(--surface));
  overflow-x: auto;
}
.docs-body pre code { background: none; padding: 0; font-size: 0.84rem; }

.docs-body kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0.1em 0.45em;
  border-radius: 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
}

/* ── Editorial blocks — the vocabulary article bodies are written in ─────── */

/* Numbered walkthrough. <ol class="docs-steps"><li><strong>Title</strong><p>…</p></li> */
.docs-steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0; counter-reset: docstep; }
.docs-steps > li {
  position: relative;
  counter-increment: docstep;
  padding: 0 0 1.3rem 2.9rem;
  border-left: 1px solid var(--border);
  margin-left: 0.9rem;
}
.docs-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.docs-steps > li::before {
  content: counter(docstep);
  position: absolute;
  left: -0.9rem;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.docs-steps > li > strong { display: block; color: var(--fg); font-size: 1rem; margin: 0.15rem 0 0.35rem; }
.docs-steps > li > p:last-child, .docs-steps > li > ul:last-child { margin-bottom: 0; }

/* Callouts. <div class="docs-note docs-note--warn"><strong>…</strong><p>…</p></div> */
.docs-note {
  position: relative;
  margin: 0 0 1.3rem;
  padding: 0.95rem 1.1rem 0.95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.docs-note > strong { display: block; color: var(--fg); margin-bottom: 0.25rem; font-size: 0.95rem; }
.docs-note > p:last-child, .docs-note > ul:last-child { margin-bottom: 0; }
.docs-note--warn {
  border-color: color-mix(in srgb, #d9822b 35%, var(--border));
  border-left-color: #d9822b;
  background: color-mix(in srgb, #d9822b 9%, transparent);
}
.docs-note--privacy {
  border-color: color-mix(in srgb, #1bb673 32%, var(--border));
  border-left-color: #1bb673;
  background: color-mix(in srgb, #1bb673 9%, transparent);
}

/* Definition-style reference tables. Used for settings and shortcut lists. */
.docs-table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 0.92rem; }
.docs-table caption { text-align: left; color: var(--muted); font-size: 0.85rem; padding-bottom: 0.5rem; }
.docs-table th, .docs-table td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.docs-table th { color: var(--fg); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.docs-table td { color: var(--muted); line-height: 1.6; }
.docs-table td:first-child { color: var(--fg); font-weight: 600; }
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-table .docs-muted { display: block; color: var(--muted); font-weight: 400; font-size: 0.85em; }
.docs-table__wrap { overflow-x: auto; margin-bottom: 1.4rem; }
.docs-table__wrap .docs-table { margin-bottom: 0; min-width: 30rem; }

/* Where-to-find-it strip at the top of a feature page. */
.docs-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.95rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  font-size: 0.88rem;
  color: var(--muted);
}
.docs-where strong { color: var(--fg); }
.docs-where__path {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--primary);
}

/* Two-column feature grid inside a body. */
.docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0.9rem; margin: 0 0 1.4rem; }
.docs-cards > div {
  padding: 1rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.docs-cards strong { display: block; color: var(--fg); margin-bottom: 0.25rem; font-size: 0.95rem; }
.docs-cards p { margin: 0; font-size: 0.88rem; line-height: 1.6; }

/* ── Pager & feedback ────────────────────────────────────────────────────── */

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.docs-pager__link {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.docs-pager__link:hover { border-color: var(--primary); transform: translateY(-2px); }
.docs-pager__link span { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.docs-pager__link strong { font-size: 0.95rem; font-weight: 700; }
.docs-pager__link--next { text-align: right; }

.docs-help { margin-top: 1.6rem; color: var(--muted); font-size: 0.88rem; }
.docs-help a { color: var(--primary); font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .docs-main { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { display: none; }
}

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 1.75rem; }
  .docs-side__toggle { display: inline-flex; }
  .docs-side {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    margin-bottom: 1.75rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .docs-side.is-open { display: block; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager__link--next { text-align: left; }
  .docs-hub { padding-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-start__card, .docs-pager__link { transition: none; }
  .docs-start__card:hover, .docs-pager__link:hover { transform: none; }
}