/* ==========================================================
   content.css — semantic Markdown documents (.doc-content)
   Editorial reading: Source Serif 4, ~70ch measure, generous
   leading, clear H3/H4/H5 hierarchy, academic tables.
   ========================================================== */

.doc-content { font-family: var(--reading); font-size: 1.09rem; line-height: 1.75; color: var(--text); max-width: var(--measure); overflow-wrap: break-word; }
.doc-content p { color: var(--text); margin: 0 0 1.05em; }
.doc-content strong { font-weight: 650; }
.doc-content em { font-style: italic; }
.doc-content .md-heading { font-family: var(--reading); color: var(--text); scroll-margin-top: calc(var(--header-h) + 64px); }
.doc-content .md-heading:focus { outline: none; }
.doc-content .md-heading:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.doc-content .md-h3 { font-size: 1.42rem; font-weight: 650; line-height: 1.3; margin: 0 0 0.55em; letter-spacing: -0.01em; }
.doc-content .md-h4 { font-size: 1.18rem; font-weight: 650; margin: 1.5em 0 0.5em; }
.doc-content .md-h5, .doc-content .md-h6 { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 1.4em 0 0.5em; color: var(--text-soft); }
.doc-content ul, .doc-content ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.doc-content li { margin: 0.3em 0; padding-left: 0.15em; }
.doc-content li > p { margin: 0 0 0.4em; }
.doc-content li::marker { color: var(--accent-strong); font-weight: 600; }
.doc-content ol > li::marker { font-family: var(--sans); font-size: 0.92em; }
.doc-content .md-blockquote { margin: 1.2em 0; padding: 0.6em 1.2em; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-soft); font-style: italic; }
.doc-content .md-blockquote p:last-child { margin-bottom: 0; }
.doc-content .md-hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.doc-content .md-code { font-family: var(--mono); font-size: 0.86em; padding: 0.1em 0.35em; background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; }
.doc-content .md-pre { margin: 1em 0; padding: 14px 16px; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font: 0.88rem/1.6 var(--mono); color: var(--code-text); }
.doc-content .md-link { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-theme="dark"] .doc-content .md-link { color: var(--accent); }
.doc-content .md-link:hover { text-decoration-thickness: 2px; }
.md-link-icon { font-size: 0.8em; margin-left: 2px; text-decoration: none; display: inline-block; }
.md-link-blocked { color: var(--text-soft); text-decoration: line-through dotted; }
.md-image { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.md-image-blocked { color: var(--text-muted); font-style: italic; }
.math-display { margin: 1em 0; overflow-x: auto; overflow-y: hidden; text-align: center; padding: 4px 0; }
.math-tex { font-family: var(--mono); font-size: 0.92em; }
mjx-container { color: var(--text); }
.math-display mjx-container[display="true"] { margin: 0 !important; }

/* tables */
.table-scroll { margin: 1.2em 0 1.4em; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-elevated); max-width: 100%; }
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.md-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; }
.md-table caption { text-align: left; padding: 10px 14px; font-weight: 600; color: var(--text-soft); caption-side: top; }
.md-table th, .md-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); min-width: 110px; }
.md-table thead th { background: var(--bg); font-weight: 650; color: var(--text); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.md-table tbody tr:last-child > * { border-bottom: 0; }
.md-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 45%, transparent); }
.md-table td:first-child { font-weight: 600; }
.md-table .align-center { text-align: center; }
.md-table .align-right { text-align: right; }

/* sections + section tools */
.doc-section { scroll-margin-top: calc(var(--header-h) + 64px); padding: 4px 0 8px; }
.doc-section + .doc-section { margin-top: 1.6em; padding-top: 1.6em; border-top: 1px solid var(--rule); }
.section-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -0.2em 0 0.9em -8px; font-family: var(--sans); }
.section-tools .btn { font-size: 0.78rem; color: var(--text-muted); }
.section-tools .btn:hover { color: var(--text); }
.bookmark-btn[aria-pressed="true"] { color: var(--attention-ink); background: var(--attention-soft); }
:root[data-theme="dark"] .bookmark-btn[aria-pressed="true"] { color: var(--attention); }

/* the eight argumentative roles — colour + chip text + border pattern */
.role-position { --rc: var(--role-position); --rs: var(--role-position-soft); }
.role-definition { --rc: var(--role-definition); --rs: var(--role-definition-soft); }
.role-premises { --rc: var(--role-premises); --rs: var(--role-premises-soft); }
.role-argumentation { --rc: var(--role-argumentation); --rs: var(--role-argumentation-soft); }
.role-counter { --rc: var(--role-counter); --rs: var(--role-counter-soft); }
.role-rebuttal { --rc: var(--role-rebuttal); --rs: var(--role-rebuttal-soft); }
.role-synthesis { --rc: var(--role-synthesis); --rs: var(--role-synthesis-soft); }
.role-limitations { --rc: var(--role-limitations); --rs: var(--role-limitations-soft); }
.doc-answer .role-section { position: relative; padding-left: 22px; border-left: 3px solid var(--rc); }
.doc-answer .role-section + .role-section { border-top: 0; margin-top: 2em; padding-top: 0; }
.doc-answer .role-counter { border-left-style: dashed; }
.doc-answer .role-limitations { border-left-style: dotted; border-left-width: 4px; }
.doc-answer .role-synthesis { border-left-width: 5px; }
.role-chip { display: inline-block; margin: 0 0 8px !important; padding: 2px 10px; border-radius: 999px; font: 700 0.7rem/1.6 var(--sans) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rc) !important; background: var(--rs); }

/* derived flow map */
.flow-map { margin: 0 0 30px; padding: 18px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--sans); }
.flow-map-caption { font-size: 0.92rem; margin-bottom: 12px; }
.flow-map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); counter-reset: none; }
.flow-map-item { position: relative; }
.flow-node { width: 100%; height: 100%; min-height: 84px; display: flex; gap: 10px; text-align: left; align-items: flex-start; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--rc, var(--border-strong)) 50%, var(--border)); border-top: 4px solid var(--rc, var(--border-strong)); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.flow-node.role-counter { border-top-style: dashed; }
.flow-node.role-limitations { border-top-style: dotted; }
.flow-node:hover { background: var(--rs, var(--surface)); }
.flow-node[aria-current] { background: var(--rs, var(--accent-soft)); box-shadow: 0 0 0 2px var(--rc, var(--accent)); }
.flow-node-step { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--rs, var(--bg)); color: var(--rc, var(--text)); font-weight: 700; font-size: 0.8rem; display: grid; place-items: center; }
.flow-node-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow-node-role { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rc, var(--text-muted)); }
.flow-node-title { font-size: 0.86rem; line-height: 1.35; }
.flow-node-relation { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.flow-map-note { margin: 12px 0 0; font-size: 0.8rem; }

@media (max-width: 600px) {
  .doc-content { font-size: 1.04rem; line-height: 1.7; }
  .doc-content .md-h3 { font-size: 1.26rem; }
  .doc-answer .role-section { padding-left: 14px; }
  .flow-map { padding: 12px; }
  .flow-map-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .flow-node { min-height: 0; padding: 8px; gap: 6px; flex-direction: column; }
  .flow-node-title { font-size: 0.8rem; }
  .flow-node-relation { display: none; }
  .md-table th, .md-table td { padding: 8px 10px; min-width: 96px; }
}