/* Article-specific diagrams and glossary. The shared article shell owns typography and navigation. */
.article-page { --article-accent: #ff8f68; }
.basics-toc { display: grid; margin-top: 32px; border-top: 1px solid var(--line); }
.basics-toc a { display: flex; align-items: center; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.basics-toc a:hover { color: var(--accent); }
.term-list { margin: 32px 0; }
.term-list > div { padding: 24px 0; border-top: 1px solid var(--line); }
.term-list dt { font-weight: 700; font-size: 20px; color: var(--ink); }
.term-list dd { margin: 10px 0 0; color: var(--ink-soft); }
.prose h3 { margin: 40px 0 20px; }
.prose pre { max-width: 100%; padding: 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #f8f8f7; line-height: 1.9; }
.prose code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.prose pre code { white-space: pre; overflow-wrap: normal; }
.data-flow { margin: 36px 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.data-flow > div { padding: 22px 12px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.data-flow > div:first-child { background: var(--article-accent); border-color: var(--article-accent); }
.data-flow strong, .data-flow span { display: block; }
.data-flow span { font-size: 14px; margin-top: 8px; }
.data-flow figcaption { grid-column: 1/-1; }
.data-flow figcaption, .url-example figcaption { font-size: 14px; color: var(--ink-soft); }
.url-example { margin: 32px 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; }
.url-example > code { font-size: 1.1em; }
.url-example dl { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.url-example dt { font-weight: 700; }
.url-example dd { margin: 0; font-size: 14px; color: var(--ink-soft); }
.extra-terms { border: 1px solid var(--line); border-radius: 14px; margin: 28px 0; }
.extra-terms summary { min-height: 48px; padding: 20px 24px; font-weight: 600; cursor: pointer; }
.extra-terms[open] summary { border-bottom: 1px solid var(--line); }
.extra-terms > div { padding: 0 24px 24px; }
.instruction-example { margin: 32px 0; padding: 24px; border-left: 4px solid var(--article-accent); background: #f8f8f7; }
.roadmap { margin: 32px 0; padding-left: 28px; }
.roadmap li { padding: 0 0 28px 10px; }
.roadmap li::marker { color: var(--accent); font-weight: 700; }
.roadmap li p { margin-top: 8px; }
.article-page .source-line { font-size: 14px; }
.source-line a { text-underline-offset: 4px; }
@media(max-width:760px) {
  .data-flow { grid-template-columns: 1fr; }
  .data-flow > b { text-align: center; transform: rotate(90deg); }
  .data-flow > div { padding: 18px; }
  .url-example { padding: 20px; }
  .term-list dt { font-size: 19px; }
}

/* Click-to-explain diagrams. All selectors are scoped to this article. */
.term-explorer { margin: 36px 0; padding: 28px; border: 1px solid var(--line); border-radius: 20px; }
.term-choices { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:24px; border-bottom:1px solid var(--line-soft); }
.article-page .term-choices button { min-height:44px; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:15px; font-weight:600; }
.article-page .term-choices button[aria-pressed="true"] { background:var(--article-accent); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.term-layout { display:grid; grid-template-columns:1fr 1.15fr; gap:32px; align-items:start; padding-top:28px; }
.term-layout > * { min-width:0; }
.term-story h3 { margin:12px 0; }
.article-page .term-story .analogy { font-size:20px; font-weight:600; color:var(--ink); margin:16px 0; }
.term-story .role-text { font-size:16px; margin:16px 0; }
.term-difference { border-top:1px solid var(--line); padding-top:8px; }
.term-difference p { margin:14px 0; font-size:15px; }
.term-difference strong, .term-difference span { display:block; }
.term-difference strong { color:var(--ink); font-size:13px; margin-bottom:4px; }
.term-picture { margin:0; position:sticky; top:116px; }
.term-picture svg { width:100%; height:auto; display:block; }
.term-picture figcaption { margin-top:14px; font-size:14px; line-height:1.7; color:var(--ink-soft); }
.sr-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.precise-explanation { max-width:740px; margin:32px auto 0; border-top:1px solid var(--line); }
.precise-explanation > summary { padding:18px 0; cursor:pointer; min-height:48px; font-weight:600; }
.precise-explanation > .prose { padding:0 0 24px; }
.live-lab { margin:36px 0 48px; padding:28px; border:1px solid var(--line); border-radius:20px; background:#fafbf9; }
.lab-heading h3 { margin:8px 0 14px; }
.lab-heading > p:not(.micro-label), .lab-note { font-size:15px; line-height:1.7; }
.lab-switches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0; }
.lab-switches label { min-height:76px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; align-items:center; gap:10px; cursor:pointer; }
.lab-switches label:has(input:checked) { border-color:var(--ink); }
.lab-switches strong, .lab-switches small { display:block; }
.lab-switches strong { font-size:16px; }
.lab-switches small { font-size:13px; color:var(--ink-soft); }
.live-lab input[type="checkbox"] { width:22px; height:22px; flex-shrink:0; accent-color:var(--accent); }
.lab-editors { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; }
.lab-editors label { display:grid; gap:8px; font-size:14px; font-weight:600; }
.lab-editors input, .lab-editors select { width:100%; min-width:0; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:white; font:inherit; font-size:16px; color:var(--ink); }
.lab-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:16px 0; }
.lab-actions label { display:flex; align-items:center; gap:8px; min-height:44px; font-size:15px; cursor:pointer; }
.article-page .lab-actions button { min-height:44px; padding:9px 16px; background:white; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.preview-wrap { margin-top:24px; padding:24px; border:1px dashed #a3a7a1; border-radius:14px; background:#f2f3f1; }
.preview-label { font-size:12px; margin:0 0 16px; font-weight:700; }
.demo-preview { container-type:inline-size; width:100%; max-width:680px; margin-inline:auto; }
.demo-preview.is-narrow { max-width:280px; }
.demo-card { background:white; padding:12px; color:#121212; overflow-wrap:anywhere; }
.demo-card img { display:block; width:180px; max-width:100%; height:auto; }
.demo-card h4 { font-size:20px; line-height:1.4; margin:12px 0; }
.demo-card p { margin:10px 0; color:inherit; }
.article-page .demo-card button { min-height:44px; padding:8px 14px; font-size:16px; }
.demo-card.is-styled { background:var(--demo-color,#ff8f68); border:1px solid #121212; border-radius:16px; padding:24px; }
.is-styled .demo-project-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:center; }
.is-styled .demo-project-layout > * { min-width:0; }
.is-styled img { width:100%; border:1px solid #121212; border-radius:10px; }
.article-page .is-styled button { background:#fff; border:1px solid #121212; border-radius:999px; }
.article-page .demo-card button:disabled { cursor:not-allowed; opacity:.55; }
.demo-card .demo-hint { font-size:12px; line-height:1.6; }
.no-html { padding:24px; border:1px dashed #7a8177; background:white; font-size:16px; }
.lab-status { padding:16px; background:#fff; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; font-size:15px; }
@container(max-width:430px) { .is-styled .demo-project-layout { grid-template-columns:1fr;gap:12px; } }
@media(max-width:1050px) { .term-layout { grid-template-columns:1fr; }.term-picture { position:static;max-width:560px; }.term-story { max-width:660px; } }
@media(max-width:760px) {
 .term-explorer,.live-lab { padding:18px; margin-top:28px; }
 .term-choices { gap:8px; }.article-page .term-choices button { font-size:14px;padding:8px 12px; }
 .term-layout { gap:24px;padding-top:24px; }
 .lab-switches { grid-template-columns:1fr; }.lab-switches label { min-height:60px; }.lab-switches label > span { display:flex;gap:10px;align-items:center;flex-wrap:wrap; }
 .lab-editors { grid-template-columns:1fr; }.preview-wrap { padding:12px; }.demo-card.is-styled { padding:16px; }
}