:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #101418;
  --muted: #5b6570;
  --border: #dfe3e8;
  --accent: #1a5fd0;
  --accent-fg: #ffffff;
  --surface: #f5f7fa;
  --code-bg: #0f172a;
  --code-fg: #e2e8f0;
  --ok: #147d3a;
  --err: #b3261e;
  --warn: #8a5a00;
  --warn-bg: #fff4e0;
  /* /docs/architecture card-based diagrams (docs/SPEC.md FR-024) — literal
     light-mode values from the design spec; dark mode remaps each role
     onto the tokens above instead of redefining new dark colors. */
  --architecture-bg: #f8fafc;
  --architecture-card: #ffffff;
  --architecture-border: #dbe3ef;
  --architecture-primary: #1e40af;
  --architecture-text: #0f172a;
  --architecture-muted: #64748b;
  --architecture-arrow: #6b7280;
  --architecture-callout-bg: #eff6ff;
  --architecture-callout-border: #bfdbfe;
  --architecture-callout-text: #1e3a8a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e13;
    --fg: #e6e9ee;
    --muted: #9aa4b2;
    --border: #262c35;
    --accent: #6fa1ff;
    --accent-fg: #08111f;
    --surface: #141922;
    --code-bg: #05070b;
    --code-fg: #d7e0ea;
    --ok: #3ecf76;
    --err: #ff6b6b;
    --warn: #f5b942;
    --warn-bg: #2c2306;
    --architecture-bg: var(--surface);
    --architecture-card: var(--bg);
    --architecture-border: var(--border);
    --architecture-primary: var(--accent);
    --architecture-text: var(--fg);
    --architecture-muted: var(--muted);
    --architecture-arrow: var(--muted);
    --architecture-callout-bg: rgba(111, 161, 255, 0.12);
    --architecture-callout-border: rgba(111, 161, 255, 0.35);
    --architecture-callout-text: var(--fg);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    'PingFang TC',
    'Noto Sans TC',
    sans-serif;
  line-height: 1.6;
}

a {
  color: var(--accent);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/*
 * Shared header, identical markup on /, /docs, /playground (site.js wires
 * it once for all three). `--header-h` is the real measured total height
 * of `.site-header-top` below — kept in sync with the padding/logo-size
 * values here so the docs sidebar/TOC's sticky `top` and every anchor
 * heading's `scroll-margin-top` never drift out of sync with a header
 * height change made only in one place.
 */
:root {
  --header-h: 64px;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header-top {
  display: flex;
  align-items: center;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0.6rem 1.25rem;
  gap: 1rem;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
  font-size: 1.05rem;
}

.brand-logo {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

.site-nav-panel {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 2rem;
  flex-wrap: wrap;
}

nav.site-nav {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

nav.site-nav a {
  position: relative;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  padding: 0.25rem 0.1rem;
  border-radius: 4px;
}

nav.site-nav a:hover,
nav.site-nav a:focus-visible {
  color: var(--fg);
}

nav.site-nav a[aria-current='page'] {
  color: var(--accent);
  font-weight: 700;
}

nav.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0.1rem;
  right: 0.1rem;
  bottom: -0.6rem;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

nav.site-nav a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header__actions .btn.primary {
  min-height: 40px;
  font-weight: 700;
  border-radius: 0.75rem;
}

/* Language switcher: icon+label button that opens a small dropdown menu of
   [data-lang-option] choices. i18n.js only cares that each option element
   carries [data-lang-option]/[aria-pressed] — the dropdown chrome here is
   purely presentational. */
.lang-switcher {
  position: relative;
}

.lang-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}

.lang-globe {
  font-size: 1rem;
  line-height: 1;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 10;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.lang-menu[hidden] {
  display: none;
}

.lang-menu button {
  border: none;
  background: none;
  color: var(--fg);
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.lang-menu button:hover,
.lang-menu button:focus-visible {
  background: var(--surface);
}

.lang-menu button[aria-pressed='true'] {
  color: var(--accent);
  font-weight: 700;
}

/* Footer's own language switcher reuses the same markup but sits inline,
   left-aligned, with no absolute-positioned dropdown chrome needed since
   the footer bar already has room. */
.site-footer__bottom .lang-switcher-toggle {
  border-color: var(--border);
}

/* Responsive header: below this width, the nav+lang panel collapses
   behind a hamburger toggle (wired in site.js) so the logo/brand row
   never gets squeezed. */
@media (max-width: 640px) {
  :root {
    --header-h: 56px;
  }

  .site-header .brand span {
    font-size: 0.95rem;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav-panel {
    /* Always in the flex layout (never display:none) so opacity/transform
       can actually animate — display isn't transitionable in the browsers
       this project targets. visibility flips at the end/start of the
       transition so the closed panel is neither visible nor tab/click
       reachable, and pointer-events:none backs that up during the
       animation itself. */
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.25rem 1rem;
    gap: 0.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0s linear 0.16s;
  }

  .site-header-top {
    position: relative;
  }

  .site-nav-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0s linear 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-nav-panel {
      transition: none;
    }
  }

  nav.site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  nav.site-nav a[aria-current='page']::after {
    display: none;
  }

  .site-header__actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.5rem;
    gap: 0.5rem;
  }

  .site-header__actions .btn.primary {
    justify-content: center;
  }

  .lang-switcher-toggle {
    justify-content: center;
  }

  .lang-menu {
    position: static;
    margin-top: 0.35rem;
    box-shadow: none;
  }
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* --- Home: full-bleed section rhythm ---
   main.home-main opts out of the generic `main` cap above so individual
   sections can span the full viewport width for their background, while
   `.container` re-applies the same 1180px content width used by
   /learn, /docs, /docs/architecture inside them. `.section-full` is the
   modifier that gives a section its own edge-to-edge surface color. */
main.home-main {
  max-width: none;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.home-section {
  padding: 1.25rem 0;
}

.home-section.section-full {
  background: var(--surface);
}

.hero {
  text-align: center;
  padding: 1rem 1rem 0.75rem;
}

.hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  /* Zero the browser default top margin, not just the bottom one — with
     the header's own AI4X sub-row removed, that default top margin was
     the difference between a tight, intentional gap under the header and
     a large, accidental one. */
  margin: 0 0 0.25rem;
}

/* Two intentional lines (product name, then what it does) rather than one
   wrapped sentence — each half is its own translatable span (data-i18n
   replaces textContent, so a literal <br> between two text nodes in one
   element would survive a locale swap, but splitting into two elements is
   the same pattern already used elsewhere, e.g. the footer's ↗ span). */
.hero-title-line {
  display: block;
}

.hero .subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 40rem;
  margin: 0.25rem auto 0.6rem;
}

.badges {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.cta-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

button,
.btn {
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

button.primary,
.btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.status-line {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}

.status-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--muted);
  margin-inline-end: 0.35em;
}

.status-dot.online {
  background: var(--ok);
}

.status-dot.offline {
  background: var(--err);
}

section.block {
  margin: 2.5rem 0;
}

section.block h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

pre,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.9rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
}

code.inline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
}

.tool-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin: 0.75rem 0;
  background: var(--surface);
}

.tool-card h4 {
  margin: 0 0 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Docs page: <details class="tool-card"> (collapsed by default) --- */

.tool-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
  cursor: pointer;
  list-style: none;
}

.tool-card > summary::-webkit-details-marker {
  display: none;
}

.tool-card__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tool-card__human-name {
  font-weight: 700;
}

.tool-card__name code {
  font-size: 0.85rem;
  color: var(--muted);
}

.tool-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tool-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--architecture-callout-bg, var(--bg));
  color: var(--architecture-primary, var(--accent));
  white-space: nowrap;
}

.tool-card__body {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.tool-card__body > *:first-child {
  margin-top: 0;
}

/* --- Docs page: code block with a copy button --- */

.code-block {
  margin: 0.75rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
}

.code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.code-block__copy:hover {
  color: var(--architecture-primary, var(--accent));
}

.code-block__copy svg {
  width: 0.85rem;
  height: 0.85rem;
}

.code-block pre {
  margin: 0;
  border-radius: 0;
}

.field-list {
  font-size: 0.9rem;
}

.playground-grid {
  display: grid;
  gap: 1rem;
}

/* Same fix as .docs-layout below: a grid item's default min-width:auto
   lets a wide <pre> result/error block (overflow-x:auto though it is)
   force this single-column track — and so the whole page — wider than
   the viewport on narrow screens. */
.playground-grid > * {
  min-width: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

select,
textarea,
input[type='text'] {
  font: inherit;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}

textarea {
  min-height: 8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.tabs button {
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.25rem;
}

.tabs button[aria-selected='true'] {
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.result-tabs [role='tabpanel'][hidden] {
  display: none;
}

.state-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.85rem;
}

.state-badge.error {
  color: var(--err);
  border-color: var(--err);
}

.state-badge.success {
  color: var(--ok);
  border-color: var(--ok);
}

footer.site-footer {
  margin-top: 3rem;
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(160px, 0.7fr) minmax(220px, 1fr);
  gap: 2.5rem;
  text-align: left;
}

.footer-brand {
  display: inline-block;
  color: var(--fg);
  font-size: 1.1rem;
  font-weight: 750;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.footer-brand-block p {
  margin: 0;
  max-width: 30rem;
  line-height: 1.65;
}

.footer-column h2 {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
}

.footer-column a,
.footer-column p {
  display: block;
  margin: 0 0 0.55rem;
  color: var(--muted);
  text-decoration: none;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--accent);
}

.footer-org-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  word-break: break-all;
}

.site-footer__bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.site-footer__bottom p {
  margin: 0;
}

@media (max-width: 760px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Home hero: value-first layout --- */

.text-link {
  color: var(--accent);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0.6rem 0.25rem;
}

.fact-checklist {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.fact-checklist .check {
  color: var(--ok);
  font-weight: 700;
  margin-inline-end: 0.3em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 0.75rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  width: fit-content;
}

.endpoint-box {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  max-width: fit-content;
}

.endpoint-box .endpoint-label {
  color: var(--code-fg);
  opacity: 0.7;
  font-size: 0.8rem;
}

.endpoint-box code {
  color: var(--code-fg);
  background: none;
  border: none;
  padding: 0;
}

.endpoint-box button {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

/* --- Home: "MCP in 60 Seconds" before/after comparison ---
   Two fully independent, distinctly colored panels (not two rows inside
   one shared box) — .mcp-panel reuses the same .architecture-node/
   .architecture-flow-steps primitives as the 30-second-architecture
   section and /docs/architecture's request-flow diagrams for the flow
   itself (not a new diagram component), just recolored per panel, so the
   visual language still matches the rest of the site instead of the old
   dark <pre><code> block this replaces. */

.home-section h2 {
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4rem;
}

:root {
  --mcp-positive-bg: #eff6ff;
  --mcp-positive-border: #bfdbfe;
  --mcp-positive-accent: #1d4ed8;
  --mcp-negative-bg: #fff7ed;
  --mcp-negative-border: #fed7aa;
  --mcp-negative-accent: #9a3412;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mcp-positive-bg: rgba(59, 130, 246, 0.14);
    --mcp-positive-border: rgba(96, 165, 250, 0.4);
    --mcp-positive-accent: #93c5fd;
    --mcp-negative-bg: rgba(251, 146, 60, 0.1);
    --mcp-negative-border: rgba(251, 146, 60, 0.32);
    --mcp-negative-accent: #fdba74;
  }
}

.mcp-panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1rem 0;
}

.mcp-panel {
  padding: 1.5rem;
  border-radius: 1.25rem;
  border: 1px solid;
}

.mcp-panel--positive {
  background: var(--mcp-positive-bg);
  border-color: var(--mcp-positive-border);
}

.mcp-panel--negative {
  background: var(--mcp-negative-bg);
  border-color: var(--mcp-negative-border);
}

.mcp-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid;
  background: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
}

.mcp-panel__badge svg {
  width: 0.95rem;
  height: 0.95rem;
}

.mcp-panel--positive .mcp-panel__badge {
  color: var(--mcp-positive-accent);
  border-color: var(--mcp-positive-border);
}

.mcp-panel--negative .mcp-panel__badge {
  color: var(--mcp-negative-accent);
  border-color: var(--mcp-negative-border);
}

.mcp-panel__title {
  margin: 0.6rem 0 0.3rem;
  font-size: 1.3rem;
}

.mcp-panel__summary {
  margin: 0 0 1rem;
  max-width: 44rem;
}

.mcp-panel .architecture-flow-steps,
#thirty-second-architecture .architecture-flow-steps {
  margin: 0.25rem 0 1.1rem;
}

#thirty-second-architecture .architecture-diagram {
  padding: 1.1rem 1.25rem;
}

.mcp-panel .architecture-node--compact {
  background: var(--bg);
}

.mcp-panel--positive .architecture-icon {
  color: var(--mcp-positive-accent);
}

.mcp-panel--negative .architecture-icon {
  color: var(--mcp-negative-accent);
}

.mcp-panel__points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
}

.mcp-panel__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.mcp-panel__points svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
}

.mcp-panel--positive .mcp-panel__points svg {
  color: var(--mcp-positive-accent);
}

.mcp-panel--negative .mcp-panel__points svg {
  color: var(--mcp-negative-accent);
}

@media (max-width: 640px) {
  .mcp-panel__points {
    grid-template-columns: 1fr;
  }
}

.mcp-explainer-note {
  max-width: 48rem;
  margin: 0 0 0.6rem;
  color: var(--muted);
}

.mcp-explainer-emphasis {
  max-width: 48rem;
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: 1.05rem;
}

/* --- Playground layout & composer (UX pass) --- */

main.playground-main {
  max-width: 1150px;
}

button,
.btn {
  min-height: 42px;
}

.ask-composer {
  position: relative;
  margin-top: 0.5rem;
}

#ask-input {
  width: 100%;
  min-height: 4.5rem;
  max-height: 14rem;
  font-family: inherit;
  line-height: 1.6;
  padding: 0.75rem 3.25rem 0.75rem 0.9rem;
  resize: vertical;
}

.ask-send-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
}

.ask-progress {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin: 0.5rem 0 1.5rem;
}

.ask-progress-steps {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ask-progress-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
}

.ask-progress-icon::before {
  content: '○';
  display: inline-block;
  width: 1.2em;
  text-align: center;
}

.ask-progress-steps li[data-state='current'] {
  color: var(--fg);
  font-weight: 600;
}

.ask-progress-steps li[data-state='current'] .ask-progress-icon::before {
  content: '●';
  color: var(--accent);
}

.ask-progress-steps li[data-state='done'] .ask-progress-icon::before {
  content: '✓';
  color: var(--ok);
}

.ask-answer-content {
  max-width: 760px;
  line-height: 1.65;
}

.ask-answer-content p {
  margin: 0 0 0.9rem;
}

.ask-answer-content ul,
.ask-answer-content ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

.ask-answer-content li {
  margin-bottom: 0.3rem;
}

.ask-answer-actions {
  justify-content: flex-start;
  margin: 0.5rem 0 1rem;
}

#ask-trace-details summary {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  cursor: pointer;
}

.ask-basis-summary {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.trace-step-number {
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.3rem;
}

/* --- Visual MCP Trace (Tool Explorer + Ask AI4X) --- */

.trace-expand-all {
  margin-bottom: 0.75rem;
}

.trace-visual {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trace-stage {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.trace-stage > summary {
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  list-style: none;
}

.trace-stage > summary::-webkit-details-marker {
  display: none;
}

.trace-stage > summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 0.75rem;
}

.trace-stage[open] > summary::before {
  content: '▾';
}

.trace-stage-body {
  padding: 0 0.8rem 0.8rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.trace-stage-body pre {
  margin-top: 0.5rem;
}

.trace-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-weight: 600;
}

.trace-badge.observed {
  color: var(--ok);
}

.trace-badge.explanation {
  color: var(--accent);
}

/* --- Utility --- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Docs/Learn site search (FR-023) --- */

.site-search {
  position: relative;
  margin-bottom: 1.25rem;
}

.site-search input[type='search'] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.site-search-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.site-search-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: none;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}

.site-search-result:hover,
.site-search-result:focus {
  background: var(--bg);
}

.site-search-result-page {
  color: var(--muted);
  font-size: 0.8rem;
}

.site-search-empty {
  padding: 0.4rem 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- Playground Learning/Developer mode (FR-020) --- */

.mode-switcher {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 1rem;
}

.mode-switcher button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.mode-switcher button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.mode-hint {
  margin: 0 0 1.5rem;
}

body:not(.playground-developer) .dev-only {
  display: none;
}

body:not(.playground-developer) .trace-stage-body pre {
  display: none;
}

/* --- Learn: Architecture Explorer (FR-021) --- */

.arch-diagram {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin: 1rem 0;
}

.arch-node {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.arch-node[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.arch-arrow {
  color: var(--muted);
  font-size: 0.85rem;
  padding-left: 0.9rem;
}

.arch-node-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 0.8rem 1rem;
  color: var(--muted);
}

/* --- Learn: request lifecycle steps --- */

.lifecycle-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

/* --- Home example cards --- */

.section-subtitle {
  color: var(--muted);
  margin: -0.5rem 0 0.5rem;
}

.example-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Home's "What can you ask?" is a fixed 3-column grid (docs/architecture's
   own use of .example-cards keeps the auto-fit default above). */
#example-questions .example-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  #example-questions .example-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #example-questions .example-cards {
    grid-template-columns: 1fr;
  }
}

/* Home's "Three ways to get started" cards are roomier than the
   tech-card default used on /docs and /docs/architecture. */
#get-started .tech-card {
  padding: 2rem 1.75rem;
}

#get-started .tech-card__icon {
  width: 3.25rem;
  height: 3.25rem;
}

#get-started .tech-card__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.example-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.example-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.example-question {
  margin: 0;
  font-weight: 600;
}

.example-card .text-link {
  padding: 0.25rem 0;
  align-self: flex-start;
}

/* --- Playground: chips, schema-driven form --- */

.chips-label {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.5rem 0 0.4rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.chip {
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.form-field label {
  font-size: 0.85rem;
}

.field-helper {
  color: var(--muted);
  margin: 0;
  font-size: 0.8rem;
}

#advanced-json-details {
  margin-top: 0.75rem;
}

#advanced-json-details textarea {
  margin-top: 0.5rem;
}

#advanced-json-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Playground: result cards + provenance badge --- */

.result-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
}

.result-card-title {
  margin: 0;
  font-weight: 600;
}

.result-card-meta {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.provenance-badge {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

.provenance-badge[hidden] {
  display: none;
}

/* docs/adr/0007-ask-ai4x-multi-round-agent-loop.md: shown only when the
   multi-round loop was cut off at MAX_ROUNDS before the model declared it
   had enough — never shown for a voluntary early stop. */
.banner-warning {
  margin: 0.75rem 0;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 0.9rem;
}

.banner-warning[hidden] {
  display: none;
}

/* --- Ask AI4X progressive disclosure --- */

#ask-trace-details,
#ask-raw-details {
  margin-top: 0.75rem;
}

#ask-trace-details summary,
#ask-raw-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

#ask-trace-details h3,
#ask-raw-details h3 {
  font-size: 0.9rem;
}

/* --- Docs: three-column layout --- */

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 190px;
  gap: 2rem;
  align-items: start;
}

/* Grid items default to min-width:auto, which lets a wide <pre>/<table>
   force the whole track (and page) wider than the viewport. Allow every
   direct child to shrink below its content's natural width instead. */
.docs-layout > * {
  min-width: 0;
}

/* Anchor targets (sidebar/TOC links jump to these) must not land behind
   the sticky header — scroll-margin-top offsets the browser's scroll
   position, not the element's own layout. */
#docs-main h2[id],
#docs-main h3[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.docs-sidebar {
  /* Sticky offset must clear the fixed header (--header-h), not just a
     fixed 1rem — otherwise the header covers the top of the sidebar as
     the page scrolls. */
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  align-self: start;
}

.docs-sidebar h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1.25rem 0 0.4rem;
}

.docs-sidebar h3:first-child {
  margin-top: 0;
}

.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-sidebar a {
  display: block;
  padding: 0.3rem 0;
  text-decoration: none;
  color: var(--fg);
  font-size: 0.9rem;
}

.docs-sidebar a:hover {
  color: var(--accent);
}

.docs-toc {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  align-self: start;
  font-size: 0.85rem;
}

.docs-toc h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.docs-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-toc a {
  display: block;
  padding: 0.2rem 0;
  text-decoration: none;
  color: var(--muted);
}

.docs-toc a:hover {
  color: var(--accent);
}

.docs-sidebar-toggle {
  display: none;
  width: 100%;
  margin-bottom: 1rem;
  text-align: left;
}

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
  }

  .docs-toc {
    display: none;
  }

  .docs-sidebar-toggle {
    display: inline-flex;
  }

  .docs-sidebar {
    position: static;
  }

  .docs-sidebar.collapsed .docs-sidebar-body {
    display: none;
  }
}

/* --- Architecture page: full-width layout, no left/right nav --- */

main.arch-page-layout {
  max-width: 1280px;
}

.arch-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.arch-section-nav a {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.arch-section-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  .arch-section-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Docs: tool reference blocks + param tables --- */

.tool-card .tool-purpose {
  margin: 0 0 0.6rem;
}

.tool-card {
  overflow-x: auto;
}

.param-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6rem 0;
  font-size: 0.85rem;
  table-layout: fixed;
  word-break: break-word;
}

.param-table th,
.param-table td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.param-table th {
  color: var(--muted);
  font-weight: 600;
}

.tool-card pre {
  font-size: 0.8rem;
}

/* --- Docs: Connect a Client tabs --- */

.connect-tab-panel[hidden] {
  display: none;
}

/* --- Architecture page: security FAQ cards reuse .example-label for the
   question line, but that class was designed as a small uppercase eyebrow
   tag — uppercasing mixed Chinese/English text (e.g. "shell command")
   reads badly, so restore normal case and a readable size here. --- */
#security .example-label {
  text-transform: none;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: normal;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.security-q-num {
  flex: 0 0 auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--architecture-callout-bg, var(--surface));
  color: var(--architecture-primary, var(--accent));
  font-size: 0.78rem;
  font-weight: 700;
}

/* --- Architecture page: role-based reading guide --- */

.role-nav {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.9rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.role-nav-title {
  margin-top: 0;
}

.role-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.role-nav li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

.role-nav li strong {
  min-width: 240px;
}

/* --- Architecture page: card-based architecture flow diagram (Lucide icons) ---
   HTML supplies semantic markup (article/h4/p) and <i data-lucide="…">;
   architecture.js only calls lucide.createIcons() — every position below
   comes from CSS Grid/Flexbox, never from JS layout math. */

.architecture-eyebrow {
  margin: 1.5rem 0 0.75rem;
  color: var(--architecture-primary);
  font-weight: 700;
  text-align: center;
}

.architecture-flow {
  margin-top: 2rem;
}

.architecture-flow > h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  text-align: center;
}

.architecture-diagram {
  padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.75rem);
  background: var(--architecture-bg);
  border: 1px solid var(--architecture-border);
  border-radius: 1.5rem;
}

.architecture-node {
  min-width: 0;
  min-height: 220px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--architecture-card);
  border: 1px solid var(--architecture-border);
  border-radius: 1.25rem;
}

.architecture-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  color: var(--architecture-primary);
  stroke-width: 2;
}

.architecture-node__title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--architecture-text);
}

.architecture-node__technology {
  margin: 0.4rem 0 0;
  font-size: 0.98rem;
  color: var(--architecture-muted);
}

.architecture-node__description {
  margin: 0.75rem 0 0;
  max-width: 17rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--architecture-muted);
}

/* Compact variant: same design language, shorter card, used inside the
   Request Flow tabs where a step needs only a title + one-line description. */
.architecture-node--compact {
  min-height: 0;
  padding: 1.1rem 1rem;
}

.architecture-node--compact .architecture-icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
}

.architecture-node--compact .architecture-node__title {
  font-size: 1rem;
}

.architecture-node--compact .architecture-node__description {
  margin-top: 0.35rem;
  max-width: none;
  font-size: 0.85rem;
}

.architecture-connector,
.architecture-down {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--architecture-arrow);
}

.architecture-connector svg,
.architecture-down svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 1.8;
}

.architecture-down {
  padding: 1rem 0;
}

/* Desktop: pure CSS Grid, 4 nodes + 3 connectors in one row. Both the MCP
   query and the data-sync diagrams share this shape. */
.architecture-query-grid,
.architecture-ingestion-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr) auto
    minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
}

.architecture-storage-grid {
  width: min(100%, 42rem);
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Request Flow tabs: a variable-length row of compact nodes + connectors —
   flex-wrap rather than a fixed grid template, since step count differs
   per flow (5 for Ask AI4X, 6 for MCP Query / Data Sync). */
.architecture-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0;
}

.architecture-flow-steps .architecture-node--compact {
  flex: 1 1 150px;
  min-width: 0;
  max-width: 220px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .architecture-query-grid,
  .architecture-ingestion-grid {
    gap: 0.6rem;
  }

  .architecture-node {
    min-height: 200px;
    padding: 1.3rem 0.9rem;
  }

  .architecture-node__title {
    font-size: 1.15rem;
  }

  .architecture-node__technology {
    font-size: 0.92rem;
  }

  .architecture-node__description {
    font-size: 0.9rem;
  }
}

@media (max-width: 760px) {
  .architecture-query-grid,
  .architecture-ingestion-grid,
  .architecture-flow-steps {
    display: flex;
    flex-direction: column;
  }

  .architecture-node {
    width: 100%;
    min-height: 0;
  }

  .architecture-flow-steps .architecture-node--compact {
    max-width: none;
  }

  .architecture-connector {
    transform: rotate(90deg);
  }

  .architecture-storage-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .architecture-connector {
    transition: none;
  }
}

.architecture-callout {
  margin: 1.5rem 0;
  padding: 1rem 1.2rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--architecture-callout-bg);
  border: 1px solid var(--architecture-callout-border);
  border-radius: 1rem;
  color: var(--architecture-callout-text);
}

.architecture-callout svg {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
  color: var(--architecture-callout-text);
}

.architecture-callout p {
  margin: 0;
  line-height: 1.65;
}

/* --- Architecture page: Tech Stack cards (Lucide icons) ---
   Two groups (5-column core request path, 3-column data/operations),
   both inside one light panel; each card is icon badge -> plain-language
   name -> technology label -> description, in that reading order. */

.tech-stack-panel {
  padding: 1.5rem;
  margin: 1rem 0;
  background: var(--architecture-bg);
  border: 1px solid var(--architecture-border);
  border-radius: 1.5rem;
}

.tech-stack-panel > h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  text-align: center;
}

.tech-stack-panel > h3:not(:first-child) {
  margin-top: 2rem;
}

.tech-stack-panel > .section-subtitle {
  margin: 0 0 1rem;
  text-align: center;
}

.tech-grid {
  display: grid;
  gap: 1rem;
}

.tech-grid--core {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tech-grid--support {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 980px;
  margin-inline: auto;
}

/* Docs page reuses the same card/grid system for its overview features,
   tool categories, and reference cards — counts vary per group, so this
   modifier wraps responsively instead of a fixed column count. */
.tech-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tech-card {
  min-width: 0;
  min-height: 220px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--architecture-card);
  border: 1px solid var(--architecture-border);
  border-radius: 1.15rem;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.tech-card:hover {
  border-color: var(--architecture-primary);
  transform: translateY(-2px);
}

.tech-card__icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  display: grid;
  place-items: center;
  color: var(--architecture-primary);
  background: var(--architecture-callout-bg);
  border-radius: 0.9rem;
}

.tech-card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2;
}

.tech-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--architecture-text);
}

.tech-card__technology {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--architecture-primary);
}

.tech-card__description {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--architecture-muted);
}

@media (max-width: 1200px) {
  .tech-grid--core,
  .tech-grid--support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 700px) {
  .tech-grid--core,
  .tech-grid--support {
    grid-template-columns: 1fr;
  }

  .tech-card {
    min-height: 0;
  }
}

/* --- Architecture page: Engineering Detail > runtime cards ---
   Four deployment units (MCP Server / Ingestion Worker / Ask AI4X /
   Static Web), each icon + title + a label/value field list, since
   each unit exposes a different shape of fact than a single
   name/technology/description triple can hold. */

.runtime-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.runtime-card {
  min-width: 0;
  padding: 1.25rem;
  background: var(--architecture-card);
  border: 1px solid var(--architecture-border);
  border-radius: 1.15rem;
}

.runtime-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
  display: grid;
  place-items: center;
  color: var(--architecture-primary);
  background: var(--architecture-callout-bg);
  border-radius: 0.75rem;
}

.runtime-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke-width: 2;
}

.runtime-card__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--architecture-text);
}

.runtime-card__fields {
  margin: 0;
}

.runtime-card__fields > div {
  margin: 0 0 0.65rem;
}

.runtime-card__fields > div:last-child {
  margin-bottom: 0;
}

.runtime-card__fields dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--architecture-primary);
}

.runtime-card__fields dd {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--architecture-muted);
}

@media (max-width: 1200px) {
  .runtime-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .runtime-cards {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-card {
    transition: none;
  }

  .tech-card:hover {
    transform: none;
  }
}

.diagram-callout {
  border-left: 4px solid var(--accent);
  background: var(--surface);
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0 1.5rem;
}

.diagram-callout p {
  margin: 0.25rem 0;
}

/* --- Architecture page: numbered priority cards --- */

.priority-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.priority-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 1rem;
  text-align: center;
}

.priority-card-num {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
  margin: 0 0 0.3rem;
}

.priority-card-title {
  margin: 0 0 0.3rem;
  font-weight: 700;
}

.priority-card p:last-child {
  margin-bottom: 0;
}

/* --- Architecture page: collapsible advanced sections ---
   .collapsible-section wraps Engineering Detail / Deploy & Operate;
   .technical-flow is the same progressive-disclosure pattern for the
   "Full technical pipeline" <details> inside each Request Flow tab;
   .learn-quiz is the same pattern again for /learn's self-check <details>. */

.collapsible-section > summary,
.technical-flow > summary,
.learn-quiz > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.6rem 0;
  list-style: none;
}

.collapsible-section > summary::-webkit-details-marker,
.technical-flow > summary::-webkit-details-marker,
.learn-quiz > summary::-webkit-details-marker {
  display: none;
}

.collapsible-section > summary::before,
.technical-flow > summary::before,
.learn-quiz > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s ease;
}

.collapsible-section[open] > summary::before,
.technical-flow[open] > summary::before,
.learn-quiz[open] > summary::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .collapsible-section > summary::before,
  .technical-flow > summary::before,
  .learn-quiz > summary::before {
    transition: none;
  }
}

/* --- /learn page: hero, extra section spacing, and Learn-only components
   (comparison cards, vertical timeline, tool-example cards) that don't
   already exist on /docs or /docs/architecture. Layout/typography/card
   primitives (.arch-page-layout, .arch-section-nav, .tech-card/.tech-grid,
   .priority-cards, .architecture-callout, .collapsible-section,
   .example-cards, .code-block) are reused as-is, not duplicated. --- */

.learn-section {
  margin-top: 4.5rem;
}

.learn-section:first-of-type {
  margin-top: 2.5rem;
}

.learn-section > h2 {
  margin-bottom: 1rem;
}

.learn-hero {
  padding: 1.5rem 0 0.5rem;
  text-align: center;
}

.learn-hero h1 {
  margin: 0 0 0.75rem;
}

.learn-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1.25rem;
}

.learn-hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.learn-hero__meta strong {
  color: var(--fg);
}

/* Comparison cards: "沒有 MCP / 使用 MCP", "API / MCP", "RAG / MCP" */

.learn-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.learn-comparison__card {
  padding: 1.4rem;
  background: var(--architecture-card);
  border: 1px solid var(--architecture-border);
  border-radius: 1.15rem;
}

.learn-comparison__card h3 {
  margin: 0 0 0.75rem;
}

.learn-comparison__card ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--architecture-muted);
}

.learn-comparison__card li {
  margin-bottom: 0.4rem;
}

.learn-comparison__card li:last-child {
  margin-bottom: 0;
}

.learn-comparison__card--positive {
  border-color: var(--architecture-primary);
}

@media (max-width: 700px) {
  .learn-comparison {
    grid-template-columns: 1fr;
  }
}

/* Vertical tool-call timeline */

.learn-timeline {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  border-left: 2px solid var(--architecture-border);
}

.learn-timeline li {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
}

.learn-timeline li:last-child {
  padding-bottom: 0;
}

.learn-timeline li::before {
  content: attr(data-step);
  position: absolute;
  left: -0.95rem;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  background: var(--architecture-card);
  border: 2px solid var(--architecture-primary);
  border-radius: 999px;
  color: var(--architecture-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.learn-timeline strong {
  display: block;
  margin-bottom: 0.15rem;
}

.learn-timeline p {
  margin: 0;
  color: var(--architecture-muted);
}

/* "看懂一個 Tool" example cards: an icon-less field list, reusing the
   same dt/dd recipe as the architecture page's runtime cards. */

.learn-example {
  padding: 1.5rem;
  margin: 1rem 0;
  background: var(--architecture-bg);
  border: 1px solid var(--architecture-border);
  border-radius: 1.5rem;
}

.learn-example dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0;
}

.learn-example dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--architecture-primary);
}

.learn-example dd {
  margin: 0.25rem 0 0;
  color: var(--architecture-text);
}

.learn-example dd code {
  font-size: 0.85rem;
}