/* ------------------------------------------------------------------ *
 * doc.css — Anywhere AI user manual (wwwanywhereainet)
 * Reuses the site design tokens from styles.css (--ink, --accent, --card,
 * --line, --paper*, --radius, --shadow*, --container, --font, --display), so
 * the manual follows the site's light/dark themes automatically.
 * ------------------------------------------------------------------ */

/* ---- Title hero ---- */
.doc-title-hero {
  padding: 56px 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.doc-title-hero-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.doc-title-hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.doc-title-desc {
  margin: 14px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.55;
}

/* ---- Doc column ---- */
.doc-section { padding: 40px 0 72px; }
.doc-content {
  max-width: 860px;
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.02rem;
  line-height: 1.7;
}
.doc-content > header h1 { display: none; } /* title already shown in the hero */

.doc-content h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 2.2em 0 .6em;
  color: var(--ink);
}
.doc-content h3 {
  font-size: 1.15rem;
  margin: 1.6em 0 .5em;
  color: var(--ink);
}
.doc-content p { margin: 0 0 1em; }
.doc-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.doc-content a:hover { border-bottom-color: var(--accent); }
.doc-content strong { color: var(--ink); font-weight: 600; }
.doc-content ul, .doc-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.doc-content li { margin: .35em 0; }
.doc-content ul ul, .doc-content ol ul { margin: .3em 0 .3em; }

/* ---- Section blocks ---- */
.section-block { margin: 0 0 1.6em; }
.summary-section h2:first-child,
.page-functionalities-section h2:first-child,
.scenario-executions h2:first-child { margin-top: 1.4em; }

/* ---- Walkthrough media ---- */
.walkthrough-image, .walkthrough-video { margin: 1.6rem 0; text-align: center; }
.walkthrough-image img, .walkthrough-video video {
  max-height: 80vh;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}

/* ---- Sub-page link cards ---- */
.subpagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 2.4em 0 0;
  padding-top: 1.8em;
  border-top: 1px solid var(--line);
}
.subpagelink {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.subpagelink:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.subpagelink a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: none;
}
.subpagelink p { margin: .4em 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }

.additionalPageLinks:empty { display: none; }

@media (max-width: 640px) {
  .doc-title-hero { padding: 40px 0 16px; }
  .doc-section { padding: 28px 0 56px; }
}