/* Shared navigation, dependency diagrams, and interactive figures. */
.article-body .braid-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding: 1rem;
  margin: 0 0 1.5rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: var(--bg-surface);
}
.braid-flow-node { padding: .45rem .7rem; border: 1px solid var(--border-focus); border-radius: .35rem; }
.braid-flow-arrow { color: var(--accent-hover); }
.braid-flow li { margin: 0; }
.braid-flow li + li::before { content: '→'; margin-right: .65rem; color: var(--accent-hover); }
.article-body .braid-series-nav { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: .6rem; }
.braid-series-nav ol { margin-bottom: 0; }
.braid-series-nav [aria-current='page'] { font-weight: 600; color: var(--text-primary); }
.braid-series-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.article-body details { margin: 1.5rem 0; padding: .8rem 1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: .4rem; }
.article-body details > summary { color: var(--text-collapsible); font-weight: 600; cursor: pointer; }
.article-body details[open] > summary { margin-bottom: 1rem; }
.article-body .braid-theorem { border-left: 3px solid var(--accent); padding: 1rem 1.25rem; background: var(--bg-surface); margin: 1.5rem 0; }
.article-body .braid-theorem p:last-child { margin-bottom: 0; }
.braid-demo, .braid-animation { background: var(--bg-surface); padding: 1rem; border: 1px solid var(--border); border-radius: .6rem; margin: 1.5rem 0; }
.braid-demo > svg, .braid-animation > svg, .braid-demo > canvas, .braid-animation > canvas { display: block; width: 100%; height: auto; }
.braid-demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .8rem; }
.braid-demo button, .braid-animation button { padding: .4rem .8rem; border: 1px solid var(--border-focus); border-radius: .3rem; color: var(--text-primary); background: var(--bg-elevated); cursor: pointer; font: inherit; }
.braid-demo input[type='range'], .braid-animation input[type='range'] { accent-color: var(--accent); max-width: 100%; }
.braid-demo button:focus-visible, .braid-animation button:focus-visible, .article-body summary:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.article-body th, .article-body td { padding: .65rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.article-body figcaption { color: var(--text-secondary); }
@media (max-width: 480px) {
  .article-body .braid-flow { flex-direction: column; align-items: stretch; }
  .braid-flow li + li::before { content: '↓'; }
  .braid-demo, .braid-animation { padding: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .braid-demo *, .braid-animation * { animation: none !important; transition: none !important; }
}
.braid-flow li .braid-flow-arrow { display: none; }
.braid-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: .8rem; }
.braid-word-demo { padding: 1rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--bg-surface); }
.braid-word-display { min-height: 3rem; padding: .8rem; margin: 1rem 0; font-family: ui-monospace, monospace; font-size: 1.2rem; overflow-wrap: anywhere; }
.braid-word-demo button, .braid-word-demo select { padding: .4rem .65rem; font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-focus); border-radius: .3rem; max-width: 100%; }
.braid-word-demo button:focus-visible, .braid-word-demo select:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.braid-word-letter { display: inline-block; margin-right: .5rem; padding: .2rem .35rem; border-radius: .2rem; }
.braid-word-letter.cancelling { color: #ffb5aa; background: #562827; text-decoration: line-through; }
.braid-word-demo button:disabled { opacity: .55; cursor: default; }
.article-body .braid-mobile-flow { display: none; }
@media (max-width: 600px) {
  .braid-overview-flow > svg { display: none; }
  .article-body .braid-mobile-flow { display: flex; flex-direction: column; gap: .7rem; list-style: none; padding-left: 0; text-align: left; }
  .braid-mobile-flow li { border: 1px solid var(--border-focus); border-radius: .35rem; padding: .6rem .8rem; margin: 0; font-size: .95rem; }
}
/* Textbook statements and proofs. */
.article-body .math-env { margin: 1.8rem 0 .9rem; padding: 0; scroll-margin-top: 6rem; }
.article-body .math-env-title { margin: 0 0 .65rem; font-size: 1.03rem; line-height: 1.6; font-family: inherit; font-weight: 500; }
.math-env-label { font-weight: 700; color: var(--text-primary); }
.math-env-body { padding-left: 1rem; border-left: 1px solid var(--border); }
.math-theorem > .math-env-body, .math-lemma > .math-env-body, .math-proposition > .math-env-body, .math-corollary > .math-env-body { font-style: italic; }
.math-env-body em { font-style: normal; }
.article-body .math-proof { position: relative; margin: .8rem 0 1.8rem; padding-left: 1rem; }
.article-body .math-proof-label { margin-bottom: .6rem; font-style: italic; }
.math-qed { display: block; text-align: right; line-height: 1; font-size: 1.2rem; }
.math-proof > .math-env { font-style: normal; }
.article-body .math-proof p, .article-body .math-env p { margin-bottom: .85rem; }
.braid-cylinder { margin: 2rem 0; }
.braid-cylinder canvas { width: 100%; height: clamp(360px, 65vw, 540px); background: #101218; border-radius: .4rem; }
.braid-cylinder .cylinder-controls { display: grid; gap: .8rem; margin-top: 1rem; text-align: left; }
.cylinder-toolbar, .cylinder-range { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.cylinder-range label { min-width: 5rem; }
.cylinder-range input { flex: 1; min-width: 5rem; }
.cylinder-range output { min-width: 3.2rem; font-variant-numeric: tabular-nums; }
.cylinder-toolbar select { font: inherit; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-focus); border-radius: .3rem; padding: .4rem; max-width: 100%; }
.cylinder-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .9rem; margin-top: .7rem; }
.cylinder-legend span::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; background: var(--strand-color); }
.cylinder-note { color: var(--text-secondary); font-size: .9rem; }
.braid-cylinder canvas { touch-action: none; cursor: grab; }
.braid-cylinder canvas:active { cursor: grabbing; }
@media (max-width: 480px) {
  .math-env-body, .article-body .math-proof { padding-left: .6rem; }
  .cylinder-controls { font-size: .9rem; }
}
.article-body .math-reference { margin: .65rem 0 0; color: var(--text-secondary); font-size: .82rem; font-style: normal; line-height: 1.6; }