/* unrami HQ: the file view's dependency graph (docgraph.js). The look is the proof-graph atlas's (a quiet paper ground,
   a deep ink, one blue for what you can press, a muted amber for the selection, muted family hues, cards with a thin
   coloured top rule, grey edges that turn amber when selected, everything not linked dimmed), on HQ's own paper, ink and
   rules, light and dark. */
.gv{
  --gv-ground:var(--paper); --gv-card:var(--panel); --gv-ink:var(--ink); --gv-ink-2:var(--soft); --gv-ink-3:var(--faint); --gv-rule:var(--rule-2);
  --gv-edge:#A8A096; --gv-press:var(--ta); --gv-mark:#A86A14; --gv-mark-soft:#F6EAD6;
  --h1:#A8822C; --h1-ink:#7A5C16; --h2:#7568A6; --h2-ink:#53477F; --h3:#B25A63; --h3-ink:#8A3A44; --h4:#5A8C6C; --h4-ink:#3C6A4E;
  --h5:#458896; --h5-ink:#2F6573; --h6:#7F828B; --h6-ink:#555962; --h7:#85833A; --h7-ink:#5F5D1C; --h8:#945A86; --h8-ink:#6F3D63;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; min-height:420px; background:var(--panel);
}
@media (prefers-color-scheme:dark){.gv{
  --gv-edge:#6F675F; --gv-mark:#E2AC5F; --gv-mark-soft:#362A18;
  --h1:#CDAA5C; --h1-ink:#DCC07F; --h2:#A398D4; --h2-ink:#BDB4E3; --h3:#D48A93; --h3-ink:#E3A7AE; --h4:#86B996; --h4-ink:#A2CBAE;
  --h5:#77B3BF; --h5-ink:#99C7D0; --h6:#9FA2A9; --h6-ink:#BBBDC3; --h7:#BDBB72; --h7-ink:#D0CE92; --h8:#C894BB; --h8-ink:#DBB1D0;
}}
.sheet-body.graphing{grid-template-columns:minmax(0,1fr)}
.sheet-body.graphing>.sheet-side{display:none}
.gv-wait{padding:28px 22px;color:var(--soft);font:400 16px/1.45 var(--prose);margin:0;grid-column:1/-1}
.gv-main{min-width:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.gv-bar{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--gv-ink-2)}
.gv-count{font-variant-numeric:tabular-nums}
.gv-mode{align-self:center;flex:none}  /* Documents / Skills too: the document view is the default */
.gv-more{color:var(--gv-press);font-size:13.5px}
.gv-frame{position:relative;border:1px solid var(--gv-rule);background:var(--gv-ground);height:min(68vh,700px);min-height:260px;overflow:hidden;border-radius:8px}
.gv-svg{display:block;width:100%;height:100%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.gv-svg.dragging{cursor:grabbing}
.gv-zoom{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px}
.gv-zoom button{min-width:32px;height:32px;border:1px solid var(--gv-rule);background:var(--gv-card);color:var(--gv-ink);font:500 15px var(--mono);cursor:pointer;padding:0;border-radius:6px;transition:background-color .15s}
.gv-zoom button:hover{background:var(--paper)}
.gv-zoom button.fit{font-size:10px;letter-spacing:.04em;padding:0 4px}

/* the column heads */
.gv-head{font:500 10.5px var(--mono);letter-spacing:.14em;fill:var(--gv-ink-3)}
.gv-head-sub{font:500 10.5px var(--ui);fill:var(--gv-ink-3)}
.gv-head-rule{stroke:var(--gv-rule);stroke-width:1}

/* edges: grey, amber when they touch the selection; a prerequisite (rests on) is dashed */
.gv-edge .gv-line{fill:none;stroke:var(--gv-edge);stroke-width:1.15;transition:stroke .18s,stroke-width .18s}
.gv-edge .gv-arrow{fill:var(--gv-edge);stroke:none;transition:fill .18s}
.gv-edge.k-prereq .gv-line,.gv-edge.k-needs .gv-line{stroke-dasharray:4 3}
.gv-edge.k-in .gv-line,.gv-edge.k-before .gv-line,.gv-edge.k-for .gv-line{stroke:var(--gv-ink-3)}
/* a practice exam's place (hq_graph): a source no longer before the exam, in the warning colour; an exam leaving out a practice exam's problems, dotted */
.gv-edge.k-late .gv-line{stroke:var(--bad,#B3261E);stroke-dasharray:6 3}
.gv-edge.k-late .gv-arrow{fill:var(--bad,#B3261E)}
.gv-edge.k-avoids .gv-line{stroke-dasharray:1.5 4;stroke-linecap:round}
.gv-node.warn .gv-box{stroke:var(--bad,#B3261E)}
.gv-node.warn .gv-sub{fill:var(--bad,#B3261E)}
.gv-key-line.warn{stroke:var(--bad,#B3261E);stroke-dasharray:6 3}
.gv-key-line.dot{stroke-dasharray:1.5 4;stroke-linecap:round}
.gv-affected{margin:0;padding:8px 12px 8px 28px;border:1px solid var(--rule-2);border-left:3px solid var(--bad,#B3261E);border-radius:6px;background:var(--paper);font:400 14.5px/1.45 var(--prose);color:var(--ink)}
.gv-affected li+li{margin-top:4px}
.gv-edge{transition:opacity .18s}
.sel-on .gv-edge{opacity:.12}
.sel-on .gv-edge.hi{opacity:1}
.sel-on .gv-edge.hi .gv-line{stroke:var(--gv-mark);stroke-width:2.2}
.sel-on .gv-edge.hi .gv-arrow{fill:var(--gv-mark)}

/* cards: the family's hue as a thin rule along the top; a prerequisite is a dashed card on the paper */
.gv-node{cursor:pointer;outline:none;transition:opacity .18s;--hue:var(--h6);--hue-ink:var(--h6-ink)}
.gv-node .gv-box{fill:var(--gv-card);stroke:var(--gv-rule);stroke-width:1;transition:stroke .15s,fill .15s}
.gv-node .gv-rule{stroke:var(--hue);stroke-width:2.5;stroke-linecap:round}
.gv-node .gv-sub{font:500 9.5px var(--mono);letter-spacing:.09em;fill:var(--hue-ink)}
.gv-node .gv-ttl{font:600 14px var(--ui);fill:var(--gv-ink);paint-order:stroke;stroke:var(--gv-card);stroke-width:3px;stroke-linejoin:round}
.gv-node .gv-halo{fill:none;stroke:none;stroke-width:2.5;transition:stroke .15s}
.gv-node.prereq .gv-box{fill:var(--gv-ground);stroke-dasharray:4 3;stroke:var(--gv-ink-3)}
.gv-node.prereq .gv-ttl{font-weight:500;stroke:var(--gv-ground);fill:var(--gv-ink-2)}
.gv-node.kind-doc .gv-box{stroke:var(--gv-ink);stroke-width:1.6}
.gv-node.kind-doc .gv-rule{stroke:var(--gv-ink)}
.gv-node.kind-doc .gv-sub{fill:var(--gv-press);letter-spacing:.16em}
.gv-node.kind-doc .gv-ttl{font-size:15px}
.gv-node:hover .gv-box{stroke:var(--gv-press);stroke-width:1.5}
.gv-node:focus-visible .gv-halo{stroke:var(--gv-mark);stroke-dasharray:3 2}
.sel-on .gv-node{opacity:.25}
.sel-on .gv-node.near,.sel-on .gv-node.sel{opacity:1}
.sel-on .gv-node.near .gv-box{stroke:var(--gv-mark);stroke-width:1.6}
.gv-node.sel .gv-halo{stroke:var(--gv-mark);stroke-dasharray:none;stroke-width:2.5}
.gv-node.sel .gv-box{fill:var(--gv-mark-soft)}
.gv-node.sel .gv-ttl{stroke:var(--gv-mark-soft)}
.hue-h1{--hue:var(--h1);--hue-ink:var(--h1-ink)} .hue-h2{--hue:var(--h2);--hue-ink:var(--h2-ink)} .hue-h3{--hue:var(--h3);--hue-ink:var(--h3-ink)}
.hue-h4{--hue:var(--h4);--hue-ink:var(--h4-ink)} .hue-h5{--hue:var(--h5);--hue-ink:var(--h5-ink)} .hue-h6{--hue:var(--h6);--hue-ink:var(--h6-ink)}
.hue-h7{--hue:var(--h7);--hue-ink:var(--h7-ink)} .hue-h8{--hue:var(--h8);--hue-ink:var(--h8-ink)} .hue-ink{--hue:var(--gv-ink);--hue-ink:var(--gv-ink)}

/* the key */
.gv-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:2px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--gv-ink-2)}
.gv-legend li{display:inline-flex;align-items:center;gap:6px}
.gv-sw{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--hue);flex:none}
.gv-key-line{stroke:var(--gv-edge);stroke-width:1.4;fill:none}
.gv-key-line.dash{stroke-dasharray:4 3}

/* the side: what the selected card is */
.gv-side{border-left:1px solid var(--rule);padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto;max-height:calc(min(68vh,700px) + 90px)}
.gv-side p{margin:0}
.gv-eyebrow{display:flex;align-items:center;gap:8px}
.gv-title{font:600 21px/1.2 var(--word);margin:0;text-wrap:balance}
.gv-lead{font:400 15.5px/1.45 var(--prose);color:var(--ink)}
.gv-lead.muted{color:var(--soft)}
.gv-meta{font-size:13.5px;color:var(--soft)}
.gv-group{display:flex;flex-direction:column;gap:6px}
.gv-chips{display:flex;flex-wrap:wrap;gap:6px}
.gv-chip{border:1px solid var(--rule-2);background:var(--panel);border-radius:6px;padding:4px 9px 4px 8px;font:500 13px/1.3 var(--ui);cursor:pointer;text-align:left;
  box-shadow:inset 0 2px 0 var(--hue);transition:border-color .15s}
.gv-chip:hover{border-color:var(--gv-press);color:var(--gv-press)}
.gv-items{margin:0;padding-left:18px;font-size:14px;line-height:1.45}
.gv-statement{display:flex;flex-direction:column;gap:6px}
.gv-tex{font:15px/1.5 var(--paperserif);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;overflow-x:auto}
.gv-tex p{margin:0 0 .5em}

@media (max-width:860px){
  .gv{grid-template-columns:minmax(0,1fr)}
  .gv-side{border-left:0;border-top:1px solid var(--rule);max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .gv *,.gv-node,.gv-edge{transition:none!important}
}