/* =====================================================================
   g/05-library.css · chapter 05 · "The library behind the Venn"
   Styles for g/05-library.js and the chapter's step text. Every class is
   prefixed .ms-library-; colours and type come from the talk.css tokens.
   Motion: an element waits for its --d, then enters; when its diagram
   leaves, it fades first and resets only once it is invisible (.34s).
   ===================================================================== */

/* ---------------------------------------------------------------- step text */
.ms-library-who{margin-left:.95em;text-transform:uppercase;color:var(--ms-dim);transition:color .35s ease}
.ms-step.is-active .ms-library-who{color:var(--library-ink,var(--ms-label))}
.ms-step > .ms-library-quote{margin-top:24px}
.ms-library-quote{padding-left:18px;border-left:2px solid var(--rule-soft);transition:border-color .35s ease}
.ms-step.is-active .ms-library-quote{border-left-color:var(--library-ring,var(--amber))}
.ms-library-quote .q{font-size:clamp(19px,1.45vw,21.5px);line-height:1.34}
.ms-library-cite{margin-top:10px;font:700 11.5px/1.5 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:inherit;max-width:34em}
.ms-step.is-active .ms-library-cite{color:var(--ms-label)}
.ms-library-hint{max-width:30em}
.ms-library-credits{margin-top:0}

/* ---------------------------------------------------------------- the drawing */
.ms-library-svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.ms-library-svg text{pointer-events:none}
.ms-library-svg.is-now,.ms-library-svg.is-now *{transition:none!important;animation:none!important}
.ms-library-t-name{font-family:var(--f-name);font-weight:600;letter-spacing:-.004em}
.ms-library-t-lab{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ms-label)}
.ms-library-t-text{font-family:var(--f-text);font-weight:400;fill:var(--ink-3)}
.ms-library-t-title{font-family:var(--f-q);font-style:italic;font-weight:400;fill:var(--ink);transition:fill .2s}
.ms-library-t-big{font-family:var(--f-text);font-weight:500;letter-spacing:-.025em}
.ms-library-hair{stroke:var(--rule-soft);stroke-width:1}
.ms-library-hit{fill:transparent;stroke:transparent}
.ms-library-hot{cursor:pointer;outline:none}

/* ---------------------------------------------------------------- the covers
   one element per book: it moves between the shelf and its block's band */
.ms-library-cover{opacity:1;visibility:visible;
  transition:opacity .6s var(--ms-ease) calc(var(--d,0s) + .12s),transform .95s var(--ms-ease) var(--d,0s),visibility 0s}
.ms-library-cover.is-off{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ms-ease),transform 0s linear .3s,visibility 0s linear .3s}
.ms-library-cover__in{transition:transform .28s var(--ms-ease)}
.ms-library-cover:hover .ms-library-cover__in,.ms-library-cover.is-tip .ms-library-cover__in,.ms-library-cover:focus-visible .ms-library-cover__in{transform:translateY(-4px)}
.ms-library-cover__sh{fill:var(--ms-shadow);filter:url(#ms-library-sh);transform:translate(0,2px)}
.ms-library-cover__edge{fill:none;stroke:var(--rule);stroke-width:1}
:root .ms-library-cover__edge{stroke-width:.7}
.ms-library-cover:focus-visible .ms-library-cover__edge{stroke:var(--focus);stroke-width:1.6}

/* ---------------------------------------------------------------- heads, reading list, the band's rule */
.ms-library-head,.ms-library-list,.ms-library-rule{opacity:1;transform:none;transition:opacity .55s var(--ms-ease) var(--d,0s),transform .75s var(--ms-ease) var(--d,0s)}
.ms-library-head.is-off,.ms-library-list.is-off,.ms-library-rule.is-off{opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s var(--ms-ease),transform 0s linear .26s}
.ms-library-list__it.is-hl .ms-library-t-title{fill:var(--amber)}

/* ---------------------------------------------------------------- diagrams: in and out */
.ms-library-dia{opacity:1;visibility:visible;transition:opacity .45s var(--ms-ease) .1s,visibility 0s}
.ms-library-dia:not(.is-on){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ms-ease),visibility 0s linear .32s}
.ms-library-pop{opacity:0;transition:opacity 0s linear .34s}
.ms-library-dia.is-on .ms-library-pop{opacity:1;transition:opacity .55s var(--ms-ease) var(--d,0s)}
.ms-library-room__in,.ms-library-lk,.ms-library-beam__in,.ms-library-ghost{transition:opacity .22s var(--ms-ease)}

/* 1 · stakeholders: the faded brain, the rooms, the links */
.ms-library-ghost__solid{fill:var(--ms-old);opacity:0}
.ms-library-net.is-on:not(.is-done) .ms-library-ghost__solid{animation:ms-library-ghost 2.3s var(--ms-ease) both}
@keyframes ms-library-ghost{0%{opacity:0}20%{opacity:.3}50%{opacity:.3}100%{opacity:0}}
.ms-library-ghost__ring{stroke:var(--ms-old);stroke-width:1.6;stroke-dasharray:.5 6.5;stroke-linecap:round;opacity:0;transition:opacity 0s linear .34s,stroke .2s}
.ms-library-net.is-on .ms-library-ghost__ring{opacity:1;transition:opacity 1s var(--ms-ease) .55s,stroke .2s}
.ms-library-ghost__lab{fill:var(--ms-old-ink);opacity:0;transition:opacity 0s linear .34s}
.ms-library-net.is-on .ms-library-ghost__lab{opacity:1;transition:opacity .6s var(--ms-ease) .12s}
.ms-library-ghost.is-hl .ms-library-ghost__ring{stroke:var(--ms-old-ink)}
.ms-library-room{opacity:0;transform:scale(.3);transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-net.is-on .ms-library-room{opacity:1;transform:none;transition:opacity .4s var(--ms-ease) var(--d),transform .7s cubic-bezier(.3,1.4,.45,1) var(--d)}
.ms-library-room__disc{fill:var(--venn-stake);fill-opacity:1;stroke:var(--ms-stake);stroke-width:1.4;transition:stroke-width .2s,fill-opacity .2s}
.ms-library-room__ppl{fill:var(--ms-stake-ink)}
.ms-library-link{fill:none;stroke:var(--ms-stake);stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s linear .34s,stroke .2s}
.ms-library-net.is-on .ms-library-link{stroke-dashoffset:0;transition:stroke-dashoffset .65s var(--ms-ease-io) var(--d),stroke .2s}
.ms-library-net.has-hl .ms-library-room__in:not(.is-hl),.ms-library-net.has-hl .ms-library-lk:not(.is-hl),.ms-library-net.has-hl .ms-library-ghost{opacity:.26}
.ms-library-room__in.is-hl .ms-library-room__disc{stroke-width:2.4}
:root .ms-library-room__disc{fill-opacity:.3}
:root .ms-library-room__in.is-hl .ms-library-room__disc{fill-opacity:.52}
.ms-library-lk.is-hl .ms-library-link{stroke:var(--ms-stake-ink)}

/* 2 · institutions: two paths. Left, the old way in graphite; right, one loop through the people */
.ms-library-lane{transition:opacity .22s var(--ms-ease)}
.ms-library-paths[data-hl="for"] .ms-library-lane--with,.ms-library-paths[data-hl="with"] .ms-library-lane--for{opacity:.26}
.ms-library-loop{fill:none;stroke:var(--ms-inst);stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s linear .34s}
.ms-library-dia.is-on .ms-library-loop{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,1.3s) linear var(--d)}
.ms-library-loopfill{fill:var(--venn-inst);opacity:0;transition:opacity 0s linear .34s}
.ms-library-loopfill--i{fill-opacity:.9}
:root .ms-library-loopfill--i{fill-opacity:.32}
.ms-library-dia.is-on .ms-library-loopfill{opacity:1;transition:opacity .9s var(--ms-ease) var(--d)}
.ms-library-arrowhead{fill:var(--ms-inst)}
.ms-library-loops__verb{fill:var(--ms-stake-ink)}
.ms-library-altline{fill:none;stroke:var(--ms-old);stroke-linecap:round}
.ms-library-altarrow{fill:var(--ms-old)}
.ms-library-drawer__in{fill:var(--ms-old-field);stroke:var(--ms-old);stroke-linejoin:round}
.ms-library-folder{fill:var(--ms-card);stroke:var(--ms-old);stroke-linejoin:round}
.ms-library-drawer__front{fill:var(--ground);stroke:var(--ms-old)}
.ms-library-drawer__handle{fill:none;stroke:var(--ms-old)}
.ms-library-sheet{opacity:0;transform:none;transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-dia.is-on .ms-library-sheet{opacity:1;transform:translateY(var(--dy,40px));transition:opacity .25s var(--ms-ease) var(--d),transform .7s cubic-bezier(.5,0,.75,.45) calc(var(--d) + .15s)}

/* 3 · Agentic AI: the parties, AI between them, what it produces, the discussion, the decision */
.ms-library-flow{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 0s linear .34s}
.ms-library-dia.is-on .ms-library-flow{stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ms-ease-io) var(--d)}
.ms-library-rise{opacity:0;transform:translateY(8px);transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-dia.is-on .ms-library-rise{opacity:1;transform:none;transition:opacity .45s var(--ms-ease) var(--d),transform .6s var(--ms-ease) var(--d)}
.ms-library-stone{opacity:0;transform:scale(.4);transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-dia.is-on .ms-library-stone{opacity:1;transform:none;transition:opacity .35s var(--ms-ease) var(--d),transform .6s cubic-bezier(.3,1.4,.45,1) var(--d)}
.ms-library-med circle,.ms-library-med rect{transition:stroke-width .2s}
.ms-library-med .is-hl circle,.ms-library-med .is-hl rect{stroke-width:2.6}

/* 4 · coplanning: the beams sweep in, the crossing lights */
.ms-library-beam{opacity:0;transform:rotate(var(--rot,0deg));transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-beams.is-on .ms-library-beam{opacity:1;transform:none;transition:opacity .7s var(--ms-ease) var(--d),transform 1.15s var(--ms-ease) var(--d)}
.ms-library-beam__in{mix-blend-mode:var(--ms-blend)}
.ms-library-beams.has-hl .ms-library-beam__in:not(.is-hl){opacity:.2}
.ms-library-glow{opacity:0;transform:scale(.15);transition:opacity 0s linear .34s,transform 0s linear .34s}
.ms-library-beams.is-on .ms-library-glow{opacity:1;transform:none;transition:opacity .45s var(--ms-ease) var(--d),transform .9s cubic-bezier(.3,1.45,.45,1) var(--d)}
.ms-library-glow.is-hl circle:nth-child(2){stroke-width:2}
.ms-library-image__t{fill:var(--amber)}
.ms-library-image__s{fill:var(--ink-2)}
.ms-library-leader{fill:none;stroke:var(--amber);stroke-width:1;stroke-opacity:.7}

/* ---------------------------------------------------------------- the two themes
   Dark (default) is the keynote: lit hues, screen-blended. Light is coplanai.com: washes, multiplied.
   The graphic's inline styles read these variables, so a live toggle needs no rebuild. */
.ms-library-svg{
  --lg-s:var(--venn-stake-ring); --lg-i:var(--venn-inst-ring); --lg-a:var(--venn-ai-ring); --lg-o:.5;   /* the glyph's lit circle */
  --lb-s:var(--venn-stake-ring); --lb-a:var(--venn-ai-ring); --lb-p:var(--p-open);                    /* the three beams */
  --lb-p-fill:color-mix(in srgb, var(--p-open) 16%, var(--ground)); --lb-p-ink:var(--p-open);         /* the place pill */
  --lb-dec-fill:color-mix(in srgb, var(--amber) 15%, var(--ground)); --lb-dec-stroke:var(--gold); --lb-dec-ink:var(--amber);
}
:root .ms-library-svg{
  --lg-s:var(--venn-stake); --lg-i:var(--venn-inst); --lg-a:var(--venn-ai); --lg-o:.8;
  --lb-s:var(--venn-stake); --lb-a:var(--venn-ai); --lb-p:color-mix(in srgb, var(--p-open) 58%, var(--gold));
  --lb-p-fill:color-mix(in srgb, var(--p-open) 78%, var(--ground)); --lb-p-ink:var(--amber-deep);
  --lb-dec-fill:color-mix(in srgb, var(--gold) 12%, var(--ground)); --lb-dec-ink:var(--amber-deep);
}

/* ---------------------------------------------------------------- the hover card (MSTORY.tip) */
.ms-tip .ms-library-tip-st{display:block;margin-top:-1px;font-size:13px;line-height:1.35;color:var(--ink-3)}
.ms-tip .ms-library-tip-a{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.ms-tip .ms-library-tip-q{display:block;margin-top:9px;font:italic 400 16px/1.34 var(--f-q);color:var(--ink)}
.ms-tip .ms-library-tip-q--first{margin-top:2px}
.ms-tip .ms-library-tip-by{display:block;margin-top:7px;font:700 10.5px/1.4 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}