/* One canvas, one reader. Inherit the site's white, slate and pale-blue system. */
.global-graph-outer { background:#fff; }
.graph-layout { position:relative; width:100%; height:100%; }
.graph-card { width:56vw; max-width:980px; border:0; box-shadow:0 12px 48px #20324120; }
#graph-card-body { padding:12px 32px 40px; }
#graph-card-body #workspace { margin:0; padding:0; max-width:none; width:100%; }
.graph-card #article h1 { margin-top:0; }
.graph-card #article h2 { scroll-margin-top:80px; }
.graph-card .source-links { margin-top:0; }
.graph-card #article-references h2,.graph-card .article-sources-toggle { font:700 17px/1.4 Arial,Helvetica,sans-serif; }
.graph-card #article-references { margin-top:36px; }
.graph-card [id^="ref-"] { scroll-margin-top:88px; }
.graph-card .article-source-group { margin-bottom:28px; }
.graph-card #source-panel { margin-top:24px; }
.graph-card #source-matches h3 { font-size:17px; }
.graph-card .cease-to-flow-figure img { display:block; width:100%; height:auto; }
.graph-card .teaching-figure { margin:24px 0; }
body.graph-active .topbar,body.graph-active #home-footer { display:none; }
#search-dismiss { display:none; }
body.graph-active main { padding:0; margin:0; }
body.graph-active .search-area { display:none; }
body.graph-active.search-open .search-area { display:block; position:fixed; z-index:14; top:76px; left:24px; width:calc(44vw - 48px); margin:0; padding:48px 20px 20px; border-radius:16px; background:#fff; box-shadow:0 12px 48px #20324126; animation:search-arrive .22s ease-out; }
body.graph-active .search-area #home-title { display:none; }
body.graph-active .searchbox { width:100%; margin:0; }
body.graph-active #search-dismiss { display:grid; position:absolute; right:8px; top:6px; }
#search-dismiss,.header-actions .icon-button { width:40px; height:40px; place-items:center; padding:0; }
.header-actions .icon-button { display:grid; }
#search-dismiss svg,.header-actions .icon-button svg { width:20px; height:20px; }
.graph-controls { left:20px; right:auto; top:20px; gap:6px; }
.graph-controls button,.graph-card-actions button { width:40px; height:40px; }
.graph-controls svg,.graph-card-actions svg { width:20px; height:20px; }
.global-graph-container svg:focus { outline:none; }
.global-graph-container:has(svg:focus-visible)::after { content:""; position:absolute; z-index:1; top:22px; left:22px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--accent); pointer-events:none; }
.graph-card:focus { outline:none; }
.control-tooltip { position:fixed; z-index:40; max-width:min(240px,calc(100vw - 16px)); padding:6px 9px; border-radius:6px; background:var(--ink); color:var(--paper); font:12px/1.35 Arial,Helvetica,sans-serif; text-align:center; pointer-events:none; box-shadow:0 5px 16px #20324125; }
.control-tooltip[hidden] { display:none; }
.graph-card-actions { overflow:visible; }
.help { position:fixed; }
body.graph-active .help { left:20px; right:auto; top:76px; }
#source-query { caret-color:var(--accent); }
input::-webkit-search-cancel-button { display:none; }
.graph-node:focus-visible { outline:none; }
.graph-node:focus-visible circle { stroke:var(--ink); stroke-width:4; }
@keyframes search-arrive { from {opacity:.5;transform:translateX(-20px);} to {opacity:1;transform:translateX(0);} }
@media(max-width:760px){
  .graph-controls { top:10px; left:10px; gap:4px; }
  .graph-controls button { width:40px; height:40px; }
  .graph-card { width:100%; max-width:none; height:70dvh; top:auto; bottom:0; right:0; left:0; }
  #graph-card-body { padding:8px 20px 32px; }
  body.graph-active.search-open .search-area { top:68px; left:12px; width:calc(100% - 24px); }
  body.graph-active .help { left:12px; width:calc(100% - 24px); top:68px; }
}
@media(prefers-reduced-motion:reduce){body.graph-active.search-open .search-area{animation:none;}}

/* Review revision: right-aligned actions and an unobstructed search overlay. */
.graph-controls { left:auto; right:4vw; }
body.graph-active .help { left:auto; right:4vw; }
.site-header .icon-button,.header-actions .icon-button { display:grid; place-items:center; width:44px; height:44px; padding:0; }
.site-header .icon-button svg,.header-actions .icon-button svg { width:21px; height:21px; }
.header-actions .action-icon:hover,.header-actions .action-icon:focus-visible { background:#fff; color:var(--accent-dark); box-shadow:0 5px 18px #246b9430,0 0 17px #88bada45; transform:translateY(-2px); }
.site-about-credit { margin-top:24px; text-align:right; font:12px/1.5 Arial,Helvetica,sans-serif; }
.site-about-credit a { color:var(--muted); text-decoration:none; }
.site-about-credit a:hover { color:var(--accent-dark); text-decoration:underline; }
#search-backdrop { position:fixed; z-index:13; inset:0; background:#ffffff59; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
#search-backdrop[hidden] { display:none; }
body.graph-active.search-open .search-area { top:50%; left:50%; width:min(760px,calc(100vw - 40px)); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; transform:translate(-50%,-50%); animation:search-focus-in .2s ease-out; }
body.graph-active.search-open .searchbox { background:#fff; box-shadow:0 12px 36px #20324124; }
.key-dot { width:9px; height:9px; display:inline-block; border-radius:50%; flex:none; }
.graph-node { transition:opacity .16s ease; }
.graph-node text { font-family:Arial,Helvetica,sans-serif; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.graph-node:hover circle { filter:none; }
.graph-node:focus-visible circle { stroke-width:2px; }
.global-graph-container line { transition:opacity .16s ease,stroke .16s ease; }
@keyframes search-focus-in { from {opacity:.4;transform:translate(-50%,-45%);} to {opacity:1;transform:translate(-50%,-50%);} }
@media(max-width:760px){.graph-controls{left:auto;right:12px;}body.graph-active .help{left:auto;right:12px;}}
@media(prefers-reduced-motion:reduce){body.graph-active.search-open .search-area{animation:none;}.graph-node,.global-graph-container line{transition:none;}}

/* Lesson review: shared event plots and the search identity. */
body.graph-active.search-open .search-area #home-title { display:block; margin:0 0 28px; }
/* Keep phone search above the centre, with room in short and landscape views. */
@media(max-width:760px){
  body.graph-active.search-open .search-area {
    top:calc(var(--search-viewport-offset,0px) + clamp(calc(env(safe-area-inset-top) + 32px),calc(var(--search-viewport-height,100dvh) * .22),180px));
    transform:translateX(-50%);
    max-height:calc(var(--search-viewport-height,100dvh) * .78 - env(safe-area-inset-bottom) - 24px);
    overflow-y:auto;
    animation:search-phone-in .2s ease-out;
  }
  body.graph-active.search-open .search-area #home-title { margin-bottom:20px; }
}
@media(max-width:760px) and (max-height:480px){
  body.graph-active.search-open .search-area { top:calc(var(--search-viewport-offset,0px) + env(safe-area-inset-top) + 24px); max-height:calc(var(--search-viewport-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 48px); }
  body.graph-active.search-open .search-area #home-title { font-size:32px; margin-bottom:14px; }
}
@keyframes search-phone-in { from {opacity:.4;transform:translate(-50%,8px);} to {opacity:1;transform:translate(-50%,0);} }
@media(prefers-reduced-motion:reduce){body.graph-active.search-open .search-area{animation:none;}}
.loop-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.loop-heading .loop-key { margin-top:10px; }
.diagram-info-toggle { flex:none; width:36px; height:36px; display:grid; place-items:center; }
.diagram-info-toggle svg { width:20px; height:20px; }
.diagram-method { width:min(440px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); box-sizing:border-box; overflow:auto; margin:auto; padding:24px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); box-shadow:0 14px 60px #20324130; font:15px/1.6 Arial,Helvetica,sans-serif; }
.diagram-method h3 { margin:0 0 14px; font:400 24px/1.2 Georgia,serif; }
.diagram-method p { margin:12px 0; }
.diagram-method p:last-child { margin-bottom:0; }
.diagram-method::backdrop { background:#2032410a; }
.loop-figure .hydrographs { margin-top:12px; }

.loop-figure { container-type:inline-size; }
@container(min-width:520px){.loop-plots{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;}.loop-figure .hydrographs{margin-top:0;}}

/* Document comparisons wrap within the shared reading card. */
.document-summary .article-table { table-layout:fixed; }
.document-summary .article-table th,.document-summary .article-table td { white-space:normal; text-align:left; vertical-align:top; overflow-wrap:break-word; }
.document-summary .article-table th:first-child { width:36%; }
.document-summary .article-table[data-compact-key] th:first-child { width:20%; }
#article .table-citations { margin:4px 0 18px; }

.graph-node .graph-node-type { stroke-width:2.5px; }
.graph-node text { pointer-events:none; }
.graph-type-key { position:absolute; z-index:6; top:66px; right:4vw; width:max-content; min-width:148px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); box-shadow:0 12px 32px #20324124; font:12px/1.3 Arial,Helvetica,sans-serif; }
.graph-type-key[hidden],.graph-node-tooltip[hidden] { display:none; }
.graph-type-choices { display:grid; justify-items:start; gap:3px; }
.graph-type-choices button { display:flex; align-items:center; gap:9px; width:100%; min-height:32px; padding:6px 9px; border:0; border-radius:9px; background:transparent; color:var(--ink); box-shadow:none; text-align:left; font:500 12px/1.2 Arial,Helvetica,sans-serif; cursor:pointer; transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease; }
.graph-type-choices button[aria-checked="true"] { background:var(--light); font-weight:700; box-shadow:inset 0 0 0 1px var(--accent); }
.graph-type-choices button:is(:hover,:focus-visible) { background:#fff; color:var(--accent-dark); box-shadow:0 5px 18px #246b9430,0 0 17px #88bada45; transform:translateY(-2px); }
.graph-type-choices button[aria-checked="true"]:is(:hover,:focus-visible) { box-shadow:inset 0 0 0 1px var(--accent),0 5px 18px #246b9430,0 0 17px #88bada45; }
.graph-type-choices button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.graph-type-choices .key-dot { width:10px; height:10px; border:1px solid var(--paper); box-shadow:0 0 0 1px var(--line); }
.graph-node.type-match .graph-node-type { fill:var(--ink); }
.graph-node.type-match .graph-node-halo { stroke-width:2.5px; }
html[data-theme="dark"] .graph-type-choices button { box-shadow:none; }
html[data-theme="dark"] .graph-type-choices button[aria-checked="true"] { box-shadow:inset 0 0 0 1px var(--accent); }
html[data-theme="dark"] .graph-type-choices button:is(:hover,:focus-visible) { background:var(--raised); color:var(--accent-dark); box-shadow:0 5px 18px #0007,0 0 17px #82c0e120; }
html[data-theme="dark"] .graph-type-choices button[aria-checked="true"]:is(:hover,:focus-visible) { box-shadow:inset 0 0 0 1px var(--accent),0 5px 18px #0007,0 0 17px #82c0e120; }
@media(max-width:760px){
  .graph-type-key { right:12px; top:58px; width:min(220px,calc(100vw - 24px)); }
}
@media(prefers-reduced-motion:reduce){.graph-type-choices button{transition:none;}}
.graph-node-tooltip { position:fixed; z-index:8; max-width:min(320px,calc(100vw - 16px)); padding:6px 9px; border-radius:6px; background:var(--ink); color:var(--paper); font:12px/1.35 Arial,Helvetica,sans-serif; text-align:center; white-space:normal; pointer-events:none; box-shadow:0 5px 16px #20324125; }

/* Soft emphasis preserves each node's semantic colour. */
.graph-node-glow { filter:blur(5px); stroke:none!important; }
.graph-node.node-emphasis .graph-node-halo { stroke-width:1.5px; }
.graph-node.node-emphasis > text:not(.graph-node-type) { font-weight:700; }
.graph-flow { pointer-events:none; opacity:0; stroke:var(--accent); }
.graph-flow.flow-active { opacity:.8; animation:graph-evidence-flow 1.666667s linear infinite; }
.graph-flow--both.flow-active { animation:graph-evidence-exchange 1.5s ease-in-out infinite alternate; }
/* Two complete 4 + 6 dash periods make the forward repeat seamless. */
@keyframes graph-evidence-flow { from{stroke-dashoffset:0;} to{stroke-dashoffset:-20;} }
@keyframes graph-evidence-exchange { from{stroke-dashoffset:0;} to{stroke-dashoffset:-10;} }
@media(prefers-reduced-motion:reduce){.graph-flow.flow-active{animation:none;opacity:.8;}}
@media print{.graph-flow{display:none;}}
@media(max-width:480px){.graph-layout .graph-controls{gap:4px;}.graph-layout .graph-controls button{width:36px;}}

/* Shared Lucide controls. Keep links and buttons square and centred on every surface. */
:root {
  --icon-size:21px;
  --icon-control-size:44px;
  --icon-hover-paper:var(--paper);
  --icon-hover-shadow:0 5px 18px #246b9430,0 0 17px #88bada45;
  --icon-press-shadow:0 2px 6px #246b942a;
}
:root[data-theme="dark"] {
  --icon-hover-paper:var(--raised);
  --icon-hover-shadow:0 5px 18px #0007,0 0 17px #82c0e120;
  --icon-press-shadow:0 2px 6px #0007;
}
:root :is(.site-header nav,.header-actions,.graph-controls,.graph-card-actions,.meter-inspection-tools) > :is(a,button),
:root :is(.glossary-close,.hub-dialog-close,.diagram-info-toggle,.source-discovery-trigger,.mcp-address button) {
  display:grid;
  place-items:center;
  flex:0 0 var(--icon-control-size);
  width:var(--icon-control-size);
  height:var(--icon-control-size);
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--ink);
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,color .18s ease,background .18s ease;
}
:root :is(.site-header nav,.header-actions,.graph-controls,.graph-card-actions,.meter-inspection-tools,.searchbox) > :is(a,button) > svg,
:root :is(.glossary-close,.hub-dialog-close,.diagram-info-toggle,.source-discovery-trigger,.mcp-address button) > svg {
  display:block;
  flex:none;
  width:var(--icon-size);
  height:var(--icon-size);
  max-width:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:root :is(.site-header nav,.header-actions,.graph-controls,.graph-card-actions,.meter-inspection-tools) > :is(a,button):is(:hover,:focus-visible):not(:disabled),
:root :is(.glossary-close,.hub-dialog-close,.diagram-info-toggle,.source-discovery-trigger,.mcp-address button):is(:hover,:focus-visible):not(:disabled) {
  background:var(--icon-hover-paper);
  color:var(--accent-dark);
  box-shadow:var(--icon-hover-shadow);
  transform:translateY(-2px);
  text-decoration:none;
}
:root :is(.site-header nav,.header-actions,.graph-controls,.graph-card-actions,.meter-inspection-tools) > :is(a,button):active:not(:disabled),
:root :is(.glossary-close,.hub-dialog-close,.diagram-info-toggle,.source-discovery-trigger,.mcp-address button):active:not(:disabled) {
  transform:translateY(0) scale(.91);
  box-shadow:var(--icon-press-shadow);
}
.graph-controls { align-items:center; }
:root .header-actions > [aria-current="page"] { color:var(--accent-dark); }
/* Seven graph actions still fit at 320px; the icon artwork keeps its size. */
@media(max-width:360px) {
  :root { --icon-control-size:40px; }
  .graph-layout .graph-controls { gap:2px; }
}
@media(prefers-reduced-motion:reduce) {
  :root :is(.site-header nav,.header-actions,.graph-controls,.graph-card-actions,.meter-inspection-tools) > :is(a,button),
  :root :is(.glossary-close,.hub-dialog-close,.diagram-info-toggle,.source-discovery-trigger,.mcp-address button) {
    transition:none;
  }
}

/* Eight graph actions fit without changing the shared icon artwork. */
@media(max-width:420px){.graph-layout .graph-controls{gap:0;}}
@media(max-width:360px){:root{--icon-control-size:36px;}.graph-layout .graph-controls{gap:0;}}