/* graph.med — phone first, minimal (docs/publication.md §3) */
:root {
  --bg: #fff; --fg: #1a1a1a; --mute: #666; --line: #ddd; --accent: #0b5cad;
  --statement: #0b5cad; --concept: #6a994e; --contested: #c1121f; --edge: #bbb;
  --gA: #9ad3a8; --gB: #f2d97a; --g0: #f4b183; --gEK: #c5d3e8;   /* recommendation grades, light enough for dark text */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #eee; --mute: #999; --line: #333; --accent: #7cb7ff;
          --statement: #7cb7ff; --concept: #9ad17a; --contested: #ff6b6b; --edge: #555;
          --gA: #7fc492; --gB: #e5c95a; --g0: #eaa06a; --gEK: #a9bcd8; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
code { font-size: .9em; }
.top { display: flex; gap: .75rem; align-items: baseline; padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
.crumb { color: var(--mute); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { padding: 0 1rem 2rem; max-width: 52rem; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 1rem 0 .5rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.lead { color: var(--mute); }
ul.plain, ul.cards, ol.claims { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: .45rem 0; border-top: 1px solid var(--line); }
ul.cards li a { display: block; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; text-decoration: none; color: var(--fg); margin-bottom: .6rem; }
ul.cards small, ul.plain small { display: block; color: var(--mute); }
.foot { padding: 1rem; color: var(--mute); font-size: .8rem; border-top: 1px solid var(--line); }

/* the graph: one decision tree in a fixed viewport, drawn by Cytoscape.js */
.graph-wrap { margin: 0 -1rem; position: relative; background: var(--bg); border-top: 1px solid var(--line); }
#graph { display: block; width: 100%; height: 62vh; touch-action: none; }
.hint { position: absolute; left: 1rem; right: 1rem; bottom: .3rem; margin: 0; color: var(--mute); font-size: .74rem; line-height: 1.5; pointer-events: none; }
.sw { display: inline-block; width: .75em; height: .75em; vertical-align: -.05em; margin: 0 .15em 0 .45em; border: 1px solid var(--mute); box-sizing: border-box; }
.sw.question { transform: rotate(45deg) scale(.8); border-color: var(--fg); }
.sw.statement { border-radius: 2px; background: var(--mute); }
.sw.aim { clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%); background: var(--mute); }
.sw.g-A { background: var(--gA); border: 0; } .sw.g-B { background: var(--gB); border: 0; } .sw.g-0 { background: var(--g0); border: 0; } .sw.g-EK { background: var(--gEK); border: 0; }
.sw.against { border: 2px solid var(--contested); }
.tools { position: absolute; right: .6rem; top: .6rem; display: flex; gap: .4rem; }
.tools button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 1.2rem; }

/* the sheet below the graph, and the entity page */
.sheet { border-top: 2px solid var(--line); padding-top: .6rem; }
.kind { margin: .2rem 0; color: var(--mute); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.label { font-size: 1.15rem; margin: .2rem 0 .6rem; }
mark { background: var(--contested); color: #fff; padding: 0 .3em; border-radius: .3em; }
dl.slots { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: 0 0 .5rem; }
dl.slots dt { color: var(--mute); font-size: .85rem; }
dl.slots dd { margin: 0; }
.tag { display: inline-block; font-size: .75rem; padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--mute); margin: 0 .2rem .2rem 0; }
.tag.grade { color: var(--fg); border-color: var(--fg); font-weight: 600; }
ol.claims li { padding: .6rem 0; border-top: 1px solid var(--line); }
ol.claims li.contests { border-left: 3px solid var(--contested); padding-left: .6rem; }
ol.claims p { margin: .3rem 0; }
blockquote { margin: .3rem 0; padding-left: .7rem; border-left: 3px solid var(--line); color: var(--mute); font-style: italic; }
.cite { font-size: .85rem; color: var(--mute); }
.node-link { min-height: 44px; display: inline-flex; align-items: center; }   /* touch target */