/* Interactive figures of this page (figures.js): round-off vs truncation
   and the computational graph. The shared rules are in
   /assets/css/figures.css. */

/* Text fields shared by the lecture 3 figures */
.rt-figure input,.cg-figure textarea,.cg-figure .cg-inputs input{font-family:var(--mono);font-size:.82rem;
  color:var(--fg);background:var(--bg);border:1px solid var(--rule);border-radius:4px}

/* Round-off vs truncation */
.rt-figure .rt-controls{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:var(--sans);font-size:.9rem;color:var(--mut)}
.rt-figure input{padding:.15rem .4rem;max-width:9em}
.rt-figure canvas{display:block;width:100%;max-width:700px;margin:.6rem auto 0}
.rt-figure .rt-msg{font-family:var(--sans);font-size:.8rem;font-style:italic;color:var(--fg);min-height:1.2em}

/* Computational graph */
.cg-figure{font-family:var(--sans);font-size:.95rem;text-align:left}
.cg-figure .cg-top{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-start}
.cg-figure textarea{line-height:1.45;width:16rem;max-width:100%;min-height:6.4rem;padding:.5rem;resize:vertical}
.cg-figure .cg-side{flex:1;min-width:12rem;font-size:.85rem}
.cg-figure .cg-inputs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.5rem}
.cg-figure .cg-inputs label{color:var(--mut);font-style:italic}
.cg-figure .cg-inputs input{width:3.4rem;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  background:transparent;text-align:center}
.cg-figure .cg-btns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.cg-figure button{font:inherit;font-size:.8rem;padding:.25rem .65rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--bg);color:var(--fg);cursor:pointer}
.cg-figure button:hover:not(:disabled){border-color:var(--fg)}
.cg-figure button:disabled{opacity:.4;cursor:default}
.cg-figure .cg-legend{font-size:.78rem;color:var(--mut);margin-top:.4rem}
.cg-figure .cg-topo{font-size:.84rem;color:var(--mut);margin:.9rem 0 .1rem}
.cg-figure .cg-topo b{color:var(--fg);font-variant:small-caps;letter-spacing:.03em;font-weight:600}
.cg-figure .cg-topo .cur{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.cg-figure .cg-svg{width:100%;height:auto;display:block}
.cg-figure .cg-msg{font-size:.8rem;font-style:italic;color:var(--fg);min-height:1.1em}
.cg-figure .cg-explain{font-family:var(--mono);font-size:.78rem;color:var(--fg);min-height:2.6em;background:var(--surface);
  border-left:2px solid var(--rule);padding:.45rem .65rem;margin:.4rem 0 .2rem;line-height:1.45;white-space:pre-wrap}

/* The graph itself: classes set by lecture3.ts, colours from the tokens. */
.cg-svg text{font-family:var(--sans)}
.cg-svg .cg-node circle{fill:var(--bg);stroke:var(--faint);stroke-width:1.5}
.cg-svg .cg-node circle.is-touched{stroke:var(--acc);stroke-width:2.4}
.cg-svg .cg-node circle.is-result{stroke:var(--acc);stroke-width:3}
.cg-svg .cg-name{fill:var(--fg)}
.cg-svg .cg-val{fill:var(--mut)}
.cg-svg .cg-adj{fill:var(--acc);font-weight:700}
.cg-svg .cg-flo{fill:var(--acc);font-style:italic}
.cg-svg .cg-edge{stroke:var(--faint);stroke-width:1.4}
.cg-svg .cg-edge.is-visited{stroke:var(--acc);stroke-opacity:.4;stroke-width:1.8}
.cg-svg .cg-edge.is-active{stroke:var(--acc);stroke-width:2.6}
.cg-svg .cg-arrow-head{fill:var(--faint)}
.cg-svg .cg-arrow-head.is-accent{fill:var(--acc)}
@media (max-width:640px){.cg-figure textarea{width:100%}}

@media print{.cg-figure .cg-btns{display:none}}