/*
  diagram.css: styles for window.Diagram (diagram.js). Link it after frame.css.

  Tokens. The defaults are the Screenrights palette; any world re-themes a diagram by setting them on an ancestor.
    --dg-bg      stage ground, label masks            deep #120E29
    --dg-panel   node fill                            #1B1540
    --dg-ink     text                                 ivory #F3EEE2
    --dg-muted   secondary text                       lilac grey #A9A1CD
    --dg-line    edges and outlines                   lilac at 62% (3.6:1 on the stage, WCAG 1.4.11)
    --dg-accent  accent fills and the play button     bright violet #6A4BF0
    --dg-soft    accent strokes and packets           lilac #A898FF
    --dg-gold    focus, notes, badges, highlights     gold #F2C14E
  Type: Archivo (display) for the caption, IBM Plex Sans for labels, badges and edge labels, IBM Plex Mono for the step counter.
  Text never goes below 12px, including at 390px.
*/
:root{
  --dg-bg:#120E29;
  --dg-panel:#1B1540;
  --dg-ink:#F3EEE2;
  --dg-muted:#A9A1CD;
  --dg-line:rgba(168,152,255,.62);
  --dg-accent:#6A4BF0;
  --dg-soft:#A898FF;
  --dg-gold:#F2C14E;
  --dg-display:var(--fr-display,"Archivo",Arial,sans-serif);
  --dg-body:var(--fr-body,"IBM Plex Sans","Helvetica Neue",Arial,sans-serif);
  --dg-mono:var(--fr-mono,"IBM Plex Mono",ui-monospace,Menlo,monospace);
  --dg-ease:cubic-bezier(.16,1,.3,1);
}

.dg{position:relative;margin:0;min-width:0;color:var(--dg-ink);font:400 15px/1.45 var(--dg-body)}
.dg *,.dg *::before,.dg *::after{box-sizing:border-box}
.dg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---------- caption (figcaption, the visible title) ---------- */
.dg-cap{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.dg-cap::before{content:"";flex:none;align-self:center;width:22px;height:2px;border-radius:2px;background:var(--dg-gold)}
.dg-cap-title{font:700 clamp(18px,1.7vw,23px)/1.18 var(--dg-display);font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.005em;text-wrap:balance;transition:font-variation-settings 1.4s var(--dg-ease),opacity .9s var(--dg-ease)}
.dg.is-pre .dg-cap-title{font-variation-settings:"wdth" 67,"wght" 480;opacity:.45}

/* ---------- stage ---------- */
.dg-stage{position:relative;padding:clamp(16px,2.6vw,36px) clamp(12px,2.6vw,36px);border:1px solid rgba(168,152,255,.16);border-radius:20px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--dg-accent) 18%,transparent),transparent 60%),
    radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--dg-gold) 6%,transparent),transparent 55%),
    radial-gradient(circle at 1px 1px,rgba(168,152,255,.13) 1px,transparent 1.4px) 0 0/22px 22px,
    var(--dg-bg)}
.dg.is-narrow .dg-stage{border-radius:16px}
.dg-canvas{position:relative;min-width:0}
.dg-svg{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.dg-grid{position:relative;z-index:2;display:grid;align-items:stretch;justify-items:stretch}
.dg-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}

/* ---------- nodes (HTML text over SVG shapes) ---------- */
.dg-node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;width:100%;height:100%;
  margin:0;padding:14px 12px 13px;border:0;border-radius:12px;background:none;color:var(--dg-ink);font:inherit;text-align:center;
  overflow-wrap:normal;hyphens:manual;transition:opacity .45s var(--dg-ease),transform .45s var(--dg-ease)}
.dg.is-tight .dg-node{overflow-wrap:anywhere;hyphens:auto}
/* hyphenated compounds stay whole while there is room (diagram.js wraps them; .is-loose is its fallback) */
.dg-nw{white-space:nowrap}
.dg.is-loose .dg-nw{white-space:normal}
.dg-node[data-kind=decision]{padding-inline:20px}
.dg-node[data-kind=store]{padding-top:20px}
.dg-node[data-kind=actor]{padding-inline:20px}
button.dg-node{cursor:pointer;-webkit-tap-highlight-color:transparent}
button.dg-node:focus{outline:none}
button.dg-node:focus-visible{outline:2px solid var(--dg-gold);outline-offset:5px}
.dg-n-head{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 8px;max-width:100%}
.dg-n-label{flex:1 1 0;font:600 15px/1.24 var(--dg-body);letter-spacing:-.003em;text-wrap:balance}
.dg-n-sub{font:400 13px/1.35 var(--dg-body);color:var(--dg-muted);text-wrap:balance}
.dg-icon{flex:none;width:17px;height:17px;fill:none;stroke:var(--dg-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dg-node[data-tone=gold] .dg-icon{stroke:var(--dg-gold)}
.dg-n-ord{flex:none;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid color-mix(in srgb,var(--dg-gold) 70%,transparent);border-radius:999px;font:500 12px/1 var(--dg-body);letter-spacing:var(--fr-track,.02em);color:var(--dg-gold)}
.dg-n-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:100%;margin-top:2px}
.dg-badge{padding:3px 8px 4px;border:1px solid color-mix(in srgb,var(--dg-gold) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--dg-bg) 55%,transparent);
  font:500 12px/1.2 var(--dg-body);letter-spacing:.01em;color:var(--dg-gold)}
.dg.is-measure .dg-badge{white-space:nowrap}
.dg-node.is-crossed .dg-n-label{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--dg-gold)}
.dg-node[data-tone=muted],.dg-node[data-tone=ghost]{color:var(--dg-muted)}

/* the "has a note" marker: a plus on the node's corner, a cross when open */
.dg-n-more{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:var(--dg-bg);border:1.5px solid var(--dg-gold);transition:transform .35s var(--dg-ease),background .25s}
.dg-n-more::before,.dg-n-more::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;border-radius:1px;background:var(--dg-gold)}
.dg-n-more::after{transform:rotate(90deg)}
button.dg-node:hover .dg-n-more,.dg-node.is-open .dg-n-more{background:color-mix(in srgb,var(--dg-gold) 22%,var(--dg-bg))}
.dg-node.is-open .dg-n-more{transform:rotate(45deg)}

/* ---------- node shapes ---------- */
.dg-outline{fill:var(--dg-panel);stroke:color-mix(in srgb,var(--dg-soft) 46%,transparent);stroke-width:1.3;transition:stroke .35s,stroke-width .35s,fill .35s}
.dg-rim{fill:none;stroke:color-mix(in srgb,var(--dg-soft) 46%,transparent);stroke-width:1.3;transition:stroke .35s}
.dg-shape{transition:opacity .45s var(--dg-ease)}
.dg-shape[data-tone=accent] .dg-outline{fill:color-mix(in srgb,var(--dg-accent) 30%,var(--dg-bg));stroke:var(--dg-soft)}
.dg-shape[data-tone=gold] .dg-outline{fill:color-mix(in srgb,var(--dg-gold) 7%,var(--dg-bg));stroke:color-mix(in srgb,var(--dg-gold) 75%,transparent)}
.dg-shape[data-tone=muted] .dg-outline{fill:color-mix(in srgb,var(--dg-panel) 55%,var(--dg-bg));stroke:color-mix(in srgb,var(--dg-soft) 26%,transparent)}
.dg-shape[data-tone=ghost] .dg-outline{fill:none;stroke:color-mix(in srgb,var(--dg-soft) 34%,transparent);stroke-dasharray:6 5}
.dg-shape[data-kind=note] .dg-outline{fill:color-mix(in srgb,var(--dg-bg) 70%,transparent);stroke-dasharray:6 5}
.dg-shape[data-kind=note][data-tone=gold] .dg-outline{fill:color-mix(in srgb,var(--dg-gold) 5%,var(--dg-bg))}
.dg-shape.is-dashed .dg-outline{stroke-dasharray:6 5}
.dg-shape[data-kind=gate] .dg-outline{stroke:var(--dg-gold)}
.dg-shape[data-kind=gate] .dg-rim{stroke:color-mix(in srgb,var(--dg-gold) 45%,transparent)}
.dg-shape[data-kind=stage] .dg-outline{fill:color-mix(in srgb,var(--dg-panel) 80%,var(--dg-bg))}
.dg-strike{fill:none;stroke:var(--dg-gold);stroke-width:1.6;stroke-linecap:round;opacity:.7}
.dg-shape.is-hover .dg-outline,.dg-shape.is-open .dg-outline{stroke:var(--dg-gold);stroke-width:1.8}
.dg-shape.is-hit .dg-outline{stroke:var(--dg-soft);stroke-width:2;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--dg-soft) 55%,transparent))}
.dg-shape.is-flash .dg-outline{stroke:var(--dg-gold);stroke-width:1.8}

/* ---------- edges ---------- */
.dg-edge{fill:none;stroke:var(--dg-line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s,stroke-width .35s,opacity .45s}
.dg-edge.is-dashed{stroke-dasharray:7 6}
.dg-edge.is-dotted{stroke-dasharray:.01 6;stroke-width:2.3}
.dg-arrow{fill:var(--dg-line);transition:fill .35s,opacity .45s}
.dg-edge[data-tone=accent]{stroke:var(--dg-soft)}
.dg-arrow[data-tone=accent]{fill:var(--dg-soft)}
.dg-edge[data-tone=gold]{stroke:color-mix(in srgb,var(--dg-gold) 80%,transparent)}
.dg-arrow[data-tone=gold]{fill:color-mix(in srgb,var(--dg-gold) 80%,transparent)}
.dg-edge[data-tone=muted],.dg-edge[data-tone=ghost]{stroke:color-mix(in srgb,var(--dg-soft) 28%,transparent)}
.dg-arrow[data-tone=muted],.dg-arrow[data-tone=ghost]{fill:color-mix(in srgb,var(--dg-soft) 28%,transparent)}
.dg-elabel{position:absolute;width:max-content;transform:translate(-50%,-50%);padding:4px 8px 5px;border:1px solid rgba(168,152,255,.24);border-radius:8px;background:var(--dg-bg);
  font:500 12px/1.3 var(--dg-body);letter-spacing:var(--fr-track,.02em);color:var(--dg-muted);text-align:center;text-wrap:balance;transition:opacity .45s,color .35s,border-color .35s}
.dg-elabel[data-tone=gold]{color:var(--dg-gold);border-color:color-mix(in srgb,var(--dg-gold) 40%,transparent)}

/* ---------- groups ---------- */
.dg-group{fill:color-mix(in srgb,var(--dg-soft) 3%,transparent);stroke:color-mix(in srgb,var(--dg-soft) 30%,transparent);stroke-width:1.2;transition:opacity .45s}
.dg-group.is-dashed{stroke-dasharray:6 6}
.dg-group[data-tone=gold]{fill:color-mix(in srgb,var(--dg-gold) 3%,transparent);stroke:color-mix(in srgb,var(--dg-gold) 48%,transparent)}
.dg-glabel{position:absolute;width:max-content;padding:2px 9px 3px;border-radius:999px;background:var(--dg-bg);
  font:500 12px/1.3 var(--dg-body);letter-spacing:var(--fr-track,.02em);color:var(--dg-soft);text-wrap:balance;transition:opacity .45s}
.dg-glabel[data-tone=gold]{color:var(--dg-gold)}

/* ---------- packets and the drawing pen ---------- */
.dg-packet-halo{fill:var(--dg-soft);opacity:.24}
.dg-packet-core{fill:#EDE8FF}
.dg-packet[data-tone=gold] .dg-packet-halo{fill:var(--dg-gold)}
.dg-packet[data-tone=gold] .dg-packet-core{fill:#FFE7A8}
.dg-pen{fill:var(--dg-gold);filter:drop-shadow(0 0 5px var(--dg-gold))}

/* ---------- first paint before the draw-in ---------- */
.dg.is-pre :is(.dg-node,.dg-shape,.dg-edge,.dg-arrow,.dg-elabel,.dg-glabel,.dg-group){opacity:0}

/* ---------- play: focus and dim (dimming plus a heavier outline, never colour alone) ---------- */
.dg.is-stepping :is(.dg-node,.dg-shape).is-dim{opacity:.2}
.dg.is-stepping :is(.dg-edge,.dg-arrow,.dg-elabel,.dg-group,.dg-glabel).is-dim{opacity:.16}
.dg.is-stepping .dg-shape.is-focus .dg-outline{stroke:var(--dg-gold);stroke-width:2.4}
.dg.is-stepping .dg-node.is-focus{transform:translateY(-2px)}
.dg.is-stepping .dg-edge.is-hot{stroke:var(--dg-soft);stroke-width:2.4}
.dg.is-stepping .dg-edge.is-hot[data-tone=gold]{stroke:var(--dg-gold)}
.dg.is-stepping .dg-arrow.is-hot{fill:var(--dg-soft)}
.dg.is-stepping .dg-arrow.is-hot[data-tone=gold]{fill:var(--dg-gold)}
.dg.is-stepping .dg-elabel.is-hot{color:var(--dg-ink);border-color:var(--dg-soft)}

/* ---------- explore callout ---------- */
.dg-callout{position:absolute;z-index:6;width:min(320px,calc(100% + 8px));padding:14px 40px 15px 16px;border:1px solid color-mix(in srgb,var(--dg-gold) 50%,transparent);border-radius:14px;
  background:color-mix(in srgb,var(--dg-panel) 88%,#000);box-shadow:0 18px 44px rgba(3,2,10,.55),0 0 0 1px rgba(0,0,0,.2);pointer-events:auto;text-align:left}
.dg-callout[hidden]{display:none}
.dg-callout::before{content:"";position:absolute;left:var(--dg-ax,50%);width:12px;height:12px;margin-left:-6px;background:inherit;border:inherit;border-width:1px 0 0 1px;transform:rotate(45deg)}
.dg-callout[data-side=below]::before{top:-7px}
.dg-callout[data-side=above]::before{bottom:-7px;transform:rotate(225deg)}
.dg-callout[data-side=right]::before{left:-7px;top:var(--dg-ay,50%);margin:-6px 0 0;transform:rotate(-45deg)}
.dg-callout[data-side=left]::before{left:auto;right:-7px;top:var(--dg-ay,50%);margin:-6px 0 0;transform:rotate(135deg)}
.dg-callout-title{margin:0 0 4px;font:600 12px/1.3 var(--dg-body);letter-spacing:var(--fr-track,.02em);color:var(--dg-gold)}
.dg-callout-text{margin:0;font:400 15px/1.5 var(--dg-body);color:var(--dg-ink);text-wrap:pretty}
.dg-callout-close{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--dg-muted);cursor:pointer}
.dg-callout-close:hover{color:var(--dg-ink);background:rgba(168,152,255,.12)}
.dg-callout-close:focus-visible{outline:2px solid var(--dg-gold);outline-offset:1px}

/* ---------- caption line, controls and hint ---------- */
.dg-caption{margin:16px 0 0;max-width:72ch;min-height:3em;font:400 clamp(15px,1.15vw,17px)/1.5 var(--dg-body);color:var(--dg-ink);text-wrap:pretty}
.dg-caption.is-overview{color:var(--dg-muted)}
.dg-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:12px}
.dg-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dg-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border:1px solid rgba(168,152,255,.32);border-radius:999px;background:transparent;color:var(--dg-ink);
  font:600 14px/1 var(--dg-body);cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--dg-ease)}
.dg-btn:hover{border-color:var(--dg-soft);background:rgba(168,152,255,.1)}
.dg-btn:active{transform:scale(.97)}
.dg-btn:focus-visible{outline:2px solid var(--dg-gold);outline-offset:3px}
.dg-btn[aria-disabled=true]{opacity:.38;cursor:default}
.dg-btn[aria-disabled=true]:hover{background:transparent;border-color:rgba(168,152,255,.32)}
.dg-btn[hidden]{display:none}
.dg-ibtn{width:40px;padding:0}
.dg-play{min-width:104px;background:var(--dg-accent);border-color:var(--dg-accent);color:#fff}
.dg-play:hover{background:color-mix(in srgb,var(--dg-accent) 85%,#fff);border-color:transparent}
.dg-play.is-playing{background:transparent;border-color:var(--dg-soft);color:var(--dg-ink)}
.dg-bicon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dg-bicon .is-fill{fill:currentColor;stroke:none}
.dg-callout-close .dg-bicon{width:16px;height:16px}
.dg-pips{display:flex;align-items:center;gap:0;margin-left:4px}
.dg-pip{display:grid;place-items:center;width:26px;height:40px;padding:0;border:0;background:none;cursor:pointer}
.dg-pip-bar{display:block;width:18px;height:4px;border-radius:2px;background:rgba(168,152,255,.6);transition:background .3s,transform .3s var(--dg-ease)}
.dg-pip:hover .dg-pip-bar{background:rgba(168,152,255,.85)}
.dg-pip.is-done .dg-pip-bar{background:var(--dg-soft)}
.dg-pip[aria-current=step] .dg-pip-bar{background:var(--dg-gold);transform:scaleY(1.6)}
.dg-pip:focus-visible{outline:2px solid var(--dg-gold);outline-offset:-4px;border-radius:8px}
.dg-count{margin-left:6px;font:400 12px/1 var(--dg-mono);color:var(--dg-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dg-hint{display:flex;align-items:center;gap:10px;margin:12px 0 0;font:400 13px/1.4 var(--dg-body);color:var(--dg-muted)}
.dg-hint::before{content:"+";flex:none;display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--dg-gold);border-radius:50%;font:600 14px/1 var(--dg-body);color:var(--dg-gold)}

/* ---------- several diagrams: tabs ---------- */
.dg-set{min-width:0}
.dg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.dg-tab{appearance:none;min-height:40px;padding:8px 14px;border:1px solid rgba(168,152,255,.28);border-radius:999px;background:transparent;color:var(--dg-muted);font:500 14px/1.25 var(--dg-body);text-align:left;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.dg-tab:hover{color:var(--dg-ink);border-color:var(--dg-soft)}
.dg-tab[aria-selected=true]{background:var(--dg-ink);border-color:var(--dg-ink);color:var(--dg-bg)}
.dg-tab:focus-visible{outline:2px solid var(--dg-gold);outline-offset:3px}
.dg-panel[hidden]{display:none}

/* ---------- narrow (transposed) ---------- */
.dg.is-narrow .dg-node{gap:5px;padding:11px 8px 10px}
.dg.is-narrow .dg-node[data-kind=decision]{padding-inline:14px}
.dg.is-narrow .dg-node[data-kind=store]{padding-top:16px}
.dg.is-narrow .dg-n-head{flex-direction:column;gap:5px}
.dg.is-narrow .dg-n-label{font-size:14px}
.dg.is-narrow .dg-n-sub{font-size:12px}
.dg.is-narrow .dg-badge{padding:2px 6px 3px}
.dg.is-narrow .dg-n-more{top:-8px;right:-7px;width:20px;height:20px}
.dg.is-narrow .dg-cap{margin-bottom:12px}
.dg.is-narrow .dg-controls{justify-content:flex-start}
.dg.is-narrow .dg-pip{width:22px}
.dg.is-narrow .dg-pip-bar{width:14px}

/* ---------- slim figure (under 600px): pips run full width under the buttons, the count ends their row, Replay is an icon ---------- */
.dg.is-slim .dg-controls{flex-wrap:nowrap;align-items:flex-start;gap:10px}
.dg.is-slim .dg-nav{flex:1 1 0;min-width:0;row-gap:2px}
.dg.is-slim .dg-count{order:3;margin-left:auto;padding-right:2px}
.dg.is-slim .dg-pips{order:4;flex:1 1 100%;margin-left:0}
.dg.is-slim .dg-pip{flex:1 1 0;width:auto;min-width:0;height:32px}
.dg.is-slim .dg-pip-bar{width:calc(100% - 5px)}
.dg.is-slim .dg-replay{flex:none;width:40px;padding:0}
.dg.is-slim .dg-replay .dg-btext{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:599px){
  .dg-tab{flex:1 1 auto;text-align:center}
}

/* ---------- reduced motion: the composed state, no transitions ---------- */
.dg.is-reduced *,.dg.is-reduced *::before,.dg.is-reduced *::after{transition:none!important;animation:none!important}
.dg.is-reduced .dg-cap-title{font-variation-settings:"wdth" 96,"wght" 700;opacity:1}
@media (prefers-reduced-motion:reduce){
  .dg *,.dg *::before,.dg *::after{transition:none!important;animation:none!important}
}