/* ARG Laboratories: the process diagram.
   Everything here is namespaced .pd- so it layers onto a revised style.css
   without collisions. Colours and type resolve against the site's own custom
   properties and fall back to literals if those are renamed.

   Two ideas run through this file.
   1. The SVG carries geometry only. No text lives inside a viewBox, because
      SVG text scales with the box and the earlier diagrams on this site
      measured out at 2.7px on a 360px phone. Every label here is real HTML.
   2. The bars draw at a constant velocity, not a constant duration. The
      3 to 4 week bar finishes and stops while the 14 to 16 week bar keeps
      going for four times as long. The motion is the statistic. */

.pd-console{
  --pd-navy:var(--navy,#0A2B7C);
  --pd-navy-deep:var(--navy-deep,#071E58);
  --pd-graphite:var(--graphite,#414042);
  --pd-signal:var(--signal,#B26B00);
  --pd-ink:var(--ink,#14181F);
  --pd-ink-2:var(--ink-2,#4A525C);
  --pd-muted:var(--muted,#646D78);
  --pd-rule:var(--rule,#D3D8DE);
  --pd-surface:var(--surface,#FFFFFF);
  --pd-paper:var(--paper,#F4F6F8);
  --pd-display:Archivo,"Arial Narrow",sans-serif;
  --pd-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pd-bar-h:26px;
  --pd-mini-h:16px;

  background:var(--pd-surface);
  border:1px solid var(--pd-rule);
  padding:clamp(1.15rem,3vw,2.4rem);
}

.pd-console *,.pd-console *::before,.pd-console *::after{box-sizing:border-box}

/* ---------------- head ---------------- */
.pd-head{max-width:52rem;margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.pd-head h2{margin:0 0 .7rem}
.pd-lede{color:var(--pd-ink-2);font-size:1.02rem;margin:0;max-width:58ch}

/* ---------------- the ruler ---------------- */
.pd-clock{margin:0 0 clamp(1.8rem,4vw,2.6rem)}
.pd-scale{position:relative;margin:0 0 1.5rem}
.pd-axis-name{margin:0 0 .55rem}
.pd-ticknums{position:relative;height:1.05rem}
.pd-ticknums span{
  position:absolute;left:var(--x);bottom:0;transform:translateX(-50%);
  font-family:var(--pd-mono);font-size:.74rem;color:var(--pd-muted);
  letter-spacing:.04em;white-space:nowrap;
}
.pd-ticknums span:first-child{transform:none}
.pd-ticknums span:last-child{transform:translateX(-100%)}

.pd-ruler{display:block;width:100%;height:10px}
.pd-ruler-base{stroke:var(--pd-ink);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.pd-tick-minor{stroke:var(--pd-rule);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.pd-tick-major{stroke:var(--pd-muted);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}

/* ---------------- a measured row ---------------- */
.pd-row{position:relative;padding:1.05rem 0 0}
.pd-row + .pd-row{margin-top:1.15rem}

.pd-rowhead{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:.2rem 1rem;padding:0 0 .55rem}
.pd-rowhead .field{grid-column:1 / -1;margin:0}
.pd-figure{
  font-family:var(--pd-display);font-weight:800;font-stretch:112%;
  font-size:clamp(2rem,6.2vw,2.9rem);line-height:.88;letter-spacing:-.03em;
  color:var(--pd-navy);margin:0;grid-column:1;
}
.pd-unit{font-family:var(--pd-mono);font-size:.28em;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pd-muted);margin-left:.5em;vertical-align:.42em}
.pd-rownote{grid-column:2;min-width:0;font-size:.88rem;color:var(--pd-ink-2);margin:0;line-height:1.4}

/* INTEGRATION 2026-08-27: was `color:var(--pd-graphite);opacity:.62`. The
   opacity was inherited by the .pd-unit span nested inside the figure, which
   renders at .28em -- about 11px on a phone -- and dragged --pd-muted #63686F
   down to #9EA1A6, 2.59:1 on white. Normal-size text needs 4.5:1, so the unit
   label failed. The .62 blend of #414042 over white is exactly #89898A, so
   baking that in as a solid colour keeps the peer figure looking identical
   (3.49:1, and at 33-45px it is large text, which needs 3.0:1) while the unit
   label goes back to full-opacity --pd-muted at 5.61:1. Same design, legal
   contrast. */
.pd-row--peer .pd-figure{color:#89898A}
.pd-row--peer .pd-rownote{color:var(--pd-muted)}

/* ---------------- the bars ---------------- */
/* preserveAspectRatio is none, so the viewBox height and the CSS height are
   deliberately kept equal: the vertical scale stays 1 and stroke widths land
   on exact pixels. Ticks use non-scaling-stroke so they are always 1px. */
.pd-bar{display:block;width:100%;height:var(--pd-bar-h)}
.pd-clock--mini .pd-bar{height:var(--pd-mini-h)}

/* Bars are rects grown with scaleX, not dashed lines. Under
   preserveAspectRatio="none" Chrome measures stroke dashes in rendered
   pixels rather than user units, which silently breaks any dash-based draw.
   A transform composes with the viewBox correctly, so it cannot drift. */
.pd-bar-track{fill:var(--pd-paper)}
.pd-bar-fill,.pd-bar-range{transform-box:fill-box;transform-origin:left center}
.pd-row--arg .pd-bar-fill{fill:var(--pd-navy)}
.pd-row--arg .pd-bar-range{fill:var(--pd-navy);fill-opacity:.42}
.pd-row--peer .pd-bar-fill{fill:var(--pd-graphite);fill-opacity:.42}
.pd-row--peer .pd-bar-range{fill:var(--pd-graphite);fill-opacity:.2}
.pd-bar-grid{fill:none;stroke:var(--pd-rule);stroke-width:1;vector-effect:non-scaling-stroke}
.pd-notch{stroke:#fff;stroke-opacity:.8;stroke-width:2;vector-effect:non-scaling-stroke}

/* the money pins under the ARG bar */
.pd-pins{list-style:none;margin:0;padding:0;position:relative;height:2.9rem}
.pd-pins li{position:absolute;left:var(--x);top:0;max-width:14rem;padding-left:.55rem;
  border-left:2px solid var(--pd-navy)}
.pd-pin-at{display:block;font-family:var(--pd-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pd-navy)}
.pd-pin-what{display:block;font-size:.83rem;color:var(--pd-ink-2);line-height:1.35;margin-top:.1rem}

/* ---------------- caveat ---------------- */
.pd-caveat{
  border-top:1px solid var(--pd-rule);margin:1.5rem 0 0;padding:1rem 0 0;
  font-size:.93rem;color:var(--pd-ink-2);line-height:1.55;max-width:64ch;
}
.pd-caveat strong{color:var(--pd-ink)}

/* ---------------- the tie between the steps and the ruler ---------------- */
.pd-tie{
  display:none;margin:0 0 clamp(1.6rem,4vw,2.4rem);padding:.85rem 1rem;
  background:var(--pd-paper);border-left:3px solid var(--pd-rule);
  font-size:.93rem;color:var(--pd-ink-2);line-height:1.5;max-width:68ch;
}
.pd-tie-k{display:block;font-family:var(--pd-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pd-muted);margin-bottom:.3rem}
.pd-console[data-stage="05"] .pd-tie[data-when="on"]{display:block;border-left-color:var(--pd-navy)}
.pd-console[data-stage="05"] .pd-tie[data-when="on"] .pd-tie-k{color:var(--pd-navy)}
.pd-console:not([data-stage="05"]) .pd-tie[data-when="off"]{display:block}

/* when step 05 is selected the ruler it refers to lifts */
.pd-console[data-stage="05"] .pd-clock:first-of-type .pd-row--arg .pd-bar-fill,
.pd-console[data-stage="05"] .pd-clock:first-of-type .pd-row--arg .pd-bar-range{stroke:var(--pd-navy-deep)}
.pd-console[data-stage="05"] .pd-clock:first-of-type .pd-row--arg{
  outline:1px solid var(--pd-navy);outline-offset:6px;
}

/* ---------------- the five steps ---------------- */
.pd-steps{border-top:1px solid var(--pd-ink);padding-top:1.4rem}
.pd-steps-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.4rem 1.5rem;margin:0 0 1.5rem}
.pd-steps-head .field{margin:0}
.pd-readout{font-family:var(--pd-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pd-muted);margin:0}
.pd-readout strong{color:var(--pd-navy);font-weight:500}

.pd-track{position:relative}

/* Base form, every width: a vertical list that expands in place. This is what
   a phone gets, and it is also what anyone with JS off gets at any width,
   because it needs neither a rail nor a collapse to make sense. */
.pd-stages{list-style:none;margin:0;padding:0}
.pd-stage{display:block;position:relative;padding:0 0 1.5rem 2.35rem}
.pd-stage:last-child{padding-bottom:0}
.pd-stage::before{content:"";position:absolute;left:10px;top:4px;bottom:0;width:2px;
  background:var(--pd-rule)}
.pd-stage:last-child::before{display:none}
.pd-stage.pd-is-done::before{background:var(--pd-navy)}

.pd-node{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;
  padding:0 0 .2rem;margin:0;text-align:left;cursor:pointer;display:block;width:100%;
  min-width:0;font:inherit;color:inherit;
}
.pd-mark{position:absolute;left:0;top:0;display:block;width:22px;height:22px;margin:0;
  z-index:1;background:var(--pd-surface)}
.pd-mark svg{display:block}
.pd-mark-ring{fill:none;stroke:var(--pd-navy);stroke-width:1.5;
  stroke-dasharray:76;stroke-dashoffset:76;opacity:0}   /* 19x19 rect, perimeter 76 */
.pd-mark-core{fill:var(--pd-rule)}

.pd-n{display:inline;font-family:var(--pd-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;color:var(--pd-muted);margin:0 .6rem 0 0}
.pd-t{display:inline;font-family:var(--pd-display);font-weight:700;font-stretch:105%;
  font-size:1.08rem;line-height:1.2;color:var(--pd-ink);text-wrap:balance}
.pd-tag{display:block;width:max-content;max-width:100%;margin:.5rem 0 0;
  font-family:var(--pd-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pd-muted);border:1px solid transparent;padding:.2rem 0;line-height:1.1}
.pd-tag--clock{color:var(--pd-navy);border-color:var(--pd-navy);padding:.2rem .45rem;
  background:var(--pd-surface)}

.pd-node:hover .pd-mark-core{fill:var(--pd-navy)}
.pd-node:hover .pd-t{color:var(--pd-navy)}
.pd-node:hover .pd-tag--clock{background:var(--pd-navy);color:#fff}

.pd-stage.pd-is-done .pd-mark-core{fill:var(--pd-navy)}
.pd-stage.pd-is-done .pd-n{color:var(--pd-navy)}
.pd-stage.pd-is-active .pd-mark-core{fill:var(--pd-navy)}
.pd-stage.pd-is-active .pd-mark-ring{opacity:1;stroke-dashoffset:0}
.pd-stage.pd-is-active .pd-n{color:var(--pd-navy)}
.pd-stage.pd-is-active .pd-t{color:var(--pd-navy)}
.pd-stage.pd-is-active .pd-tag{color:var(--pd-navy)}

.pd-panel{padding:.9rem 0 0}
.pd-panel h3{margin:0 0 .5rem}
.pd-panel p{font-size:1rem;color:var(--pd-ink-2);margin:0 0 .9rem;max-width:62ch}
.pd-panel p:last-child{margin-bottom:0}
.pd-panel p.pd-meta{font-family:var(--pd-mono);font-size:.78rem;letter-spacing:.03em;
  color:var(--pd-ink);border-left:3px solid var(--pd-navy);padding:.35rem 0 .35rem .7rem}
.pd-meta span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pd-muted);margin-bottom:.15rem}

/* The rail only exists in the horizontal form. */
.pd-rail{display:none;position:absolute;left:11px;top:10px;height:2px;width:80%;
  pointer-events:none}
.pd-rail-track{fill:var(--pd-rule)}
.pd-rail-fill{fill:var(--pd-navy);transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0)}

/* Only once JS is running do the panels collapse. With JS off every panel
   stays open and the page reads as the plain list it always was. */
.pd-js .pd-panel{display:none}
.pd-js .pd-stage.pd-is-active .pd-panel{display:block}

/* ---- the horizontal form: wide enough AND driven by JS ----
   Gated on .pd-js because the five column grid puts every panel in the same
   cell. Without the collapse they would overlap each other. */
@media (min-width:761px){
  .pd-js .pd-rail{display:block}
  .pd-js .pd-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:0}
  .pd-js .pd-stage{display:contents}
  .pd-js .pd-stage::before{display:none}
  .pd-js .pd-node{grid-row:1;padding:0 .6rem 1.4rem 0;position:relative}
  .pd-js .pd-mark{position:relative;left:auto;top:auto;margin:0 0 .7rem}
  .pd-js .pd-n{display:block;margin:0 0 .25rem}
  .pd-js .pd-t{display:block;font-size:1rem;margin:0 0 .4rem}
  .pd-js .pd-tag{margin-top:0}
  .pd-js .pd-panel{grid-row:2;grid-column:1 / -1;
    border-top:1px solid var(--pd-rule);padding:1.3rem 0 0}
  .pd-js .pd-panel p{font-size:.98rem}
}

/* ---------------- controls ---------------- */
.pd-controls{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 0}
.pd-ctl{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--pd-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pd-navy);background:var(--pd-surface);border:1px solid var(--pd-navy);
  border-radius:0;padding:.6rem .9rem;min-height:44px;
}
.pd-ctl:hover{background:var(--pd-navy);color:#fff}
.pd-ctl[disabled]{color:var(--pd-muted);border-color:var(--pd-rule);cursor:default}
.pd-ctl[disabled]:hover{background:var(--pd-surface);color:var(--pd-muted)}
.pd-ctl--run[aria-pressed="true"]{background:var(--pd-navy);color:#fff}
.pd-console:not(.pd-js) .pd-controls{display:none}

/* focus, always visible, never removed.
   INTEGRATION 2026-08-27: was amber. The visual system reserves amber for
   "needs confirmation" and rings navy at a 3px offset (style.css section 18);
   matched here so the whole site has one focus indicator. --focus is set to
   #FFF by style.css on dark grounds, so this inherits the right one. */
.pd-console :where(button,a):focus-visible{
  outline:3px solid var(--focus,var(--navy,#0A2B7C));outline-offset:3px}

/* ================= phone ================= */
/* Below 760px the rail turns vertical and the five steps become a list that
   expands in place. Chosen rather than letting a five column grid squash:
   at 390px each column would be 62px, which is not a readable step title. */
@media (max-width:760px){
  .pd-console{--pd-bar-h:22px;--pd-mini-h:14px}

  .pd-rowhead{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .pd-figure{font-size:clamp(2.1rem,10vw,2.8rem)}
  .pd-rownote{grid-column:1;font-size:.9rem;margin-top:.2rem}

  /* pins stack under the bar as a list instead of colliding at 0% and 25% */
  .pd-pins{height:auto;display:grid;gap:.5rem;margin-top:.7rem}
  .pd-pins li{position:static;max-width:none}
  .pd-pin-at{display:inline;margin-right:.5rem}
  .pd-pin-what{display:inline;font-size:.9rem}

  .pd-controls{position:sticky;bottom:0;background:var(--pd-surface);
    padding:.9rem 0 .2rem;margin-top:1.2rem;border-top:1px solid var(--pd-rule);z-index:2}
  .pd-ctl{flex:1 1 auto;text-align:center}

  .pd-console[data-stage="05"] .pd-clock:first-of-type .pd-row--arg{outline-offset:3px}
}

@media (max-width:420px){
  .pd-ticknums span{font-size:.7rem}
  .pd-figure{font-size:2.35rem}
  .pd-t{font-size:1.04rem}
}

/* ================= motion =================
   Everything below is an enhancement. The resting state of this file is the
   finished state: bars drawn, marks set. JS adds .pd-armed to wind them back
   and .pd-in to let them run. */
@media (prefers-reduced-motion:no-preference){
  .pd-armed .pd-bar-fill,.pd-armed .pd-bar-range{transform:scaleX(0)}
  .pd-armed.pd-in .pd-bar-fill,.pd-armed.pd-in .pd-bar-range{
    transform:scaleX(1);
    transition:transform var(--dur,1s) linear var(--delay,0s);
  }
  .pd-rail-fill{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .pd-mark-ring{transition:stroke-dashoffset .45s cubic-bezier(.2,.7,.3,1) .05s,opacity .2s ease}
  .pd-mark-core{transition:fill .25s ease}
  .pd-t,.pd-n,.pd-tag{transition:color .25s ease,border-color .25s ease}
  .pd-js .pd-stage.pd-is-active .pd-panel{animation:pd-panel-in .45s cubic-bezier(.2,.7,.3,1) both}
  @keyframes pd-panel-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  .pd-stage::before{transition:background .35s ease}
  .pd-ctl{transition:background .2s ease,color .2s ease}
}

/* Reduced motion: the same states, arrived at instantly. Nothing is hidden
   behind an animation, so nothing is lost. */
@media (prefers-reduced-motion:reduce){
  .pd-bar-fill,.pd-bar-range{transform:none!important}
  .pd-mark-ring{transition:none}
  .pd-rail-fill{transition:none}
  .pd-js .pd-stage.pd-is-active .pd-panel{animation:none}
}