/* ============================================================
   Ino Anti — documentation pages (/docs/*)
   Loaded after main.css + pages.css on the four docs pages only.
   Everything is scoped to body.docs-page so the rest of the site
   is untouched.
   ============================================================ */

/* ---------- Page frame & typography ---------- */
.docs-page .section-tight { padding: 52px 0 72px; }
.docs-page .eyebrow { margin-bottom: 12px; }

/* Docs are read, not sold: a calmer h1/h2 scale than landing pages. */
.docs-page main h1 {
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.docs-page main h2 {
  font-size: clamp(1.28rem, 2.4vw, 1.5rem);
  letter-spacing: -.015em;
  margin-bottom: .65em;
}
.docs-page main h3 { font-size: 1.02rem; letter-spacing: -.01em; }
.docs-page main p { line-height: 1.65; }

/* Breadcrumb above the page title */
.docs-page .docs-crumb { font-size: .85rem; margin: 0 0 10px; color: var(--faint); }
.docs-page .docs-crumb a { color: var(--faint); }
.docs-page .docs-crumb a:hover { color: var(--text); }

/* ---------- Lists ---------- */
.docs-page main ul,
.docs-page main ol:not(.steps) {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.docs-page main ul li,
.docs-page main ol:not(.steps) li { margin-bottom: 5px; }
.docs-page main ul li:last-child,
.docs-page main ol:not(.steps) li:last-child { margin-bottom: 0; }
.docs-page main ul li::marker,
.docs-page main ol:not(.steps) li::marker { color: var(--faint); }

/* ---------- Quick-nav cards (/docs/) ---------- */
/* Same 38×38 rounded tile as the dashboard, but never larger: without
   explicit sizing the injected <svg> falls back to its 300×150 default
   and each card grows to ~468px. */
.docs-page .quick-icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  line-height: 0;
  border-radius: 10px;
  background: rgba(91, 140, 255, .12);
  border: 1px solid rgba(91, 140, 255, .22);
  margin-bottom: 14px;
}
.docs-page .quick-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  color: var(--accent-2);
}

.docs-page .docs-grid { gap: 18px; margin-top: 28px; }
.docs-page .docs-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  color: var(--text);
}
@media (min-width: 621px) {
  .docs-page .docs-card { min-height: 182px; }
}
.docs-page .docs-card:hover { color: var(--text); }
.docs-page .docs-card.card-hover:hover { border-color: rgba(91, 140, 255, .35); }
.docs-page .docs-card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.docs-page .docs-card p {
  font-size: .9rem;
  line-height: 1.55;
  margin: 0;
  color: var(--muted);
}

/* ---------- Callout card (quick-start, troubleshooting) ---------- */
.docs-page .docs-callout {
  padding: 22px 24px;
  border-color: rgba(91, 140, 255, .3);
  background: rgba(91, 140, 255, .06);
}
.docs-page .docs-callout h3 { font-size: 1rem; margin-bottom: 8px; }
.docs-page .docs-callout ul,
.docs-page .docs-callout p:last-child { margin-bottom: 0; }
.docs-page .docs-callout ul { font-size: .92rem; }

/* ---------- Tables (key → value) ---------- */
.docs-page .table { margin: 0 0 8px; }
.docs-page .table td { line-height: 1.55; }
.docs-page .table td:first-child { width: 34%; color: var(--muted); font-weight: 500; }
.docs-page .table td + td { color: var(--text); }

/* ---------- FAQ / troubleshooting accordions ---------- */
.docs-page .faq-item { margin-bottom: 9px; }
.docs-page .faq-item summary {
  padding: 15px 20px;
  line-height: 1.45;
}
.docs-page .faq-item summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
}
.docs-page .faq-item[open] summary { background: var(--panel-2); }
.docs-page .faq-body { padding: 0 20px 16px; line-height: 1.65; }

/* ---------- Inline code & code blocks ---------- */
.docs-page code { overflow-wrap: anywhere; padding: 2px 6px; border-radius: 6px; }
.docs-page pre {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.6;
}
.docs-page pre code {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  .docs-page .section-tight { padding: 36px 0 56px; }
  .docs-page main h1 { font-size: 1.9rem; }
  .docs-page .docs-grid { gap: 14px; margin-top: 22px; }
  .docs-page .docs-card { padding: 20px; }
  .docs-page .docs-callout { padding: 20px; }

  /* Two-column key/value tables become stacked rows — at 390px the
     label column was squeezed to ~107px and every value wrapped. */
  .docs-page .table,
  .docs-page .table tbody,
  .docs-page .table tr,
  .docs-page .table td { display: block; width: 100%; }
  .docs-page .table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .docs-page .table tr:first-child { padding-top: 2px; }
  .docs-page .table tr:last-child { padding-bottom: 0; border-bottom: none; }
  .docs-page .table td { border: none; padding: 0; }
  .docs-page .table td:first-child {
    width: auto;
    margin-bottom: 3px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--faint);
  }
  .docs-page .table td + td { color: var(--text); }

  .docs-page .faq-item summary { padding: 14px 17px; }
  .docs-page .faq-body { padding: 0 17px 15px; }
}