/* ============================================================
   Process map: shared look. Pairs with processmap.js.

   One colour per actor, the same ones the automation map uses, so a
   lane means the same thing on every page and in every walkthrough.
     You     clay     the judgment
     Model   blue     follows the skill, never does the arithmetic
     Script  sage     same input, same output, no AI inside
     Control rust     the check nothing gets past
   ============================================================ */
.pm {
  --pm-you: #A9834F;     --pm-you-wash: rgba(184,149,106,.16);
  --pm-model: #4F6A86;   --pm-model-wash: rgba(79,106,134,.10);
  --pm-script: #5A6B4A;  --pm-script-wash: rgba(107,127,92,.11);
  --pm-ctl: #A2533B;
  --pm-card: #FBF9F5;
  --pm-ink: #2B2825;
  --pm-faint: #7E776D;
  --pm-paper: #F5F1EA;
  --pm-rule: rgba(43,40,37,.09);
  display: block; width: 100%; height: auto; overflow: visible;
}

.pm-lane-you    { --lane: var(--pm-you);    --lane-wash: var(--pm-you-wash); }
.pm-lane-model  { --lane: var(--pm-model);  --lane-wash: var(--pm-model-wash); }
.pm-lane-script { --lane: var(--pm-script); --lane-wash: var(--pm-script-wash); }

.pm-lane-bg   { fill: var(--lane-wash); }
.pm-lane-rule { stroke: var(--pm-paper); stroke-width: 2; }
.pm-lane-name { fill: var(--lane); }
.pm-lane-sub  { fill: var(--pm-faint); }

.pm-edge  { fill: none; stroke: var(--pm-faint); stroke-width: 1.4; }
.pm-arrow { fill: var(--pm-faint); }
.pm-edge-label rect { fill: var(--pm-paper); stroke: var(--pm-faint); stroke-width: .8; }
.pm-edge-label text { fill: var(--pm-faint); }

.pm-box    { fill: var(--pm-card); stroke: var(--lane); stroke-width: 1.5; transition: fill .25s ease; }
.pm-label  { fill: var(--pm-ink); transition: fill .25s ease; }
.pm-badge  { fill: var(--lane); stroke: var(--pm-card); stroke-width: 1.5; }
.pm-badge-n{ fill: #fff; }
.pm-prog   { fill: rgba(255,255,255,.75); }
.pm-ctl    { fill: var(--pm-ctl); }
.pm-ctl-t  { fill: #fff; }
.pm-control .pm-box { stroke: var(--pm-ctl); stroke-width: 1.8; }
.pm-control .pm-badge { fill: var(--pm-ctl); }

/* work that happens after the run: drawn, but dashed */
.pm-after .pm-box { stroke-dasharray: 4 3; }
.pm-edge-after { stroke-dasharray: 4 3; }
.pm-compact .pm-after .pm-box { fill: var(--pm-card); stroke: var(--lane); stroke-width: 1.4; }
.pm-compact .pm-after .pm-num { fill: var(--lane); }
.pm-loop { stroke: var(--pm-script); stroke-width: 1.6; }
.pm-loop-label rect { stroke: var(--pm-script); }
.pm-loop-label text { fill: var(--pm-script); }

/* compact: numbered dots */
.pm-compact .pm-box  { fill: var(--lane); stroke: none; }
.pm-compact .pm-num  { fill: #fff; }
.pm-compact .pm-ring { fill: none; stroke: var(--pm-ctl); stroke-width: 1.6; }
.pm-compact .pm-edge { stroke-width: 1.2; }

/* live: what has happened is solid, what's next is quiet, now is filled */
.pm-live .pm-node { transition: opacity .25s ease; }
.pm-live .pm-node:not(.is-now):not(.is-done) { opacity: .42; }
.pm-live .pm-edge:not(.is-done) { stroke-dasharray: 3 4; opacity: .55; }
.pm-live .pm-edge-label:not(.is-done) { opacity: .5; }
.pm-live .pm-edge.is-done { stroke: var(--pm-ink); opacity: .55; }
.pm .pm-node.is-now .pm-box { fill: var(--lane); }
.pm .pm-node.is-now .pm-label { fill: #fff; }
.pm .pm-node.is-now .pm-badge { fill: var(--pm-ink); }
.pm-compact .pm-node.is-now .pm-box { stroke: var(--pm-ink); stroke-width: 2; }
.pm-compact.pm-live .pm-node:not(.is-now):not(.is-done) .pm-box { fill: var(--pm-card); stroke: var(--lane); stroke-width: 1.4; }
.pm-compact.pm-live .pm-node:not(.is-now):not(.is-done) .pm-num { fill: var(--lane); }

.pm-click .pm-node { cursor: pointer; outline: none; }
.pm-click .pm-node:hover .pm-box { stroke-width: 2.4; }
.pm-click .pm-node:focus-visible .pm-box { stroke: var(--pm-ink); stroke-width: 2.4; }

@media (prefers-reduced-motion: reduce) {
  .pm-box, .pm-label, .pm-live .pm-node { transition: none; }
}