/* ag-siding · "The siding" · 05 Approve (dark #1c1c1c band). Scoped under .aa-siding. Uses v4.css tokens (--w-*, --dk-2, --blue-lt, --ok-d, --t1…--t7, --ease, --ease-draw).
   Horizontal stage 1232×300 at 800px of stage width and up; vertical 343×640 below (container query, so the layout follows the stage, not the viewport).
   The markup is the final frame: lines drawn, the approved call leaving the siding, the sheet in its Approved state. */
.aa-siding{
  --sd-tick:520.5px;--sd-lx:600.5px;--sd-sl:816px;--sd-sw:360px;
  position:relative;margin:0;color:#fff;container-type:inline-size;
}
.aa-siding .aa-sd-stage{position:relative;height:300px;overflow:hidden}

/* lines (SVG) and calls (canvas). The static pulses are the still frame; the canvas replaces them once JS plays. */
.aa-siding .aa-sd-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.aa-siding .aa-sd-v{display:none}
.aa-siding .aa-sd-svg path{fill:none;stroke-width:1}
.aa-siding .aa-sd-sid{stroke:rgba(255,255,255,.35);stroke-dasharray:1;stroke-dashoffset:0}
.aa-siding .aa-sd-tick{stroke:var(--w-45);transform-box:fill-box;transform-origin:center}
.aa-siding .aa-sd-teth{stroke:rgba(255,255,255,.15);stroke-dasharray:1;stroke-dashoffset:0}
.aa-siding .aa-sd-pause{stroke:var(--blue-lt);stroke-width:1.3;opacity:0}
.aa-siding .aa-sd-still path{stroke-width:1.3;stroke-linecap:round}
.aa-siding .aa-sd-still .w{stroke:rgba(255,255,255,.35)}
.aa-siding .aa-sd-still .ok{stroke:rgba(143,209,158,.9)}
.aa-siding .aa-sd-cv{position:absolute;left:0;top:0;display:none;pointer-events:none}
.aa-siding.aa-live .aa-sd-cv{display:block}
.aa-siding.aa-live .aa-sd-still{display:none}

/* labels: agents and structure are mono (rule 3); people are sans */
.aa-siding .aa-sd-agents{position:absolute;left:0;top:0;width:120px;margin:0;padding:0;list-style:none}
.aa-siding .aa-sd-agents li{position:absolute;right:0;font:400 11px/14px var(--mono);color:var(--w-45);white-space:nowrap}
.aa-siding .aa-sd-agents li:nth-child(1){top:169.5px}
.aa-siding .aa-sd-agents li:nth-child(2){top:201.5px}
.aa-siding .aa-sd-agents li:nth-child(3){top:233.5px}
.aa-siding .aa-sd-agents li:nth-child(4){top:265.5px}
.aa-siding .aa-sd-lbl{position:absolute;font:400 11px/14px var(--mono);color:var(--w-45);white-space:nowrap}
.aa-siding .aa-sd-lbl-tick{left:var(--sd-tick);top:257px;translate:-50% 0}
.aa-siding .aa-sd-lbl-end{right:0;top:257px}
.aa-siding .aa-sd-lbl-held{left:var(--sd-lx);top:131px;color:var(--blue-lt);opacity:0}

/* the approval view: one UI sheet that hangs from the siding by its blue left edge (the tether runs into it) */
.aa-siding .aa-sd-sheet{position:absolute;left:var(--sd-sl);bottom:76px;width:var(--sd-sw);padding:20px;background:var(--dk-2);border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--w-06),inset 1px 0 0 var(--blue-lt)}
.aa-siding .aa-sd-hd{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;font:400 13px/20px var(--sans);color:var(--w-85)}
.aa-siding .aa-sd-sep{color:var(--w-35)}
.aa-siding .aa-sd-state{color:var(--blue-lt)}
.aa-siding .aa-sd-now{margin-left:auto;padding-left:12px;font:400 11px/20px var(--mono);color:var(--w-45)}
.aa-siding .aa-sd-dl{margin:12px 0 0}
.aa-siding .aa-sd-dl>div{display:grid;grid-template-columns:88px minmax(0,1fr)}
.aa-siding .aa-sd-dl dt{font:400 12px/20px var(--mono);color:var(--w-45)}
.aa-siding .aa-sd-dl dd{margin:0;font:400 12px/20px var(--mono);color:var(--w-85);min-width:0}
.aa-siding .aa-sd-dl dd.p,.aa-siding .aa-sd-done .p{font-family:var(--sans);font-size:13px}
.aa-siding .aa-sd-foot{display:grid;margin-top:14px}
.aa-siding .aa-sd-acts,.aa-siding .aa-sd-done{grid-area:1/1}
.aa-siding .aa-sd-acts{display:flex;align-items:center;gap:18px;font:400 13px/20px var(--sans);color:var(--w-60);opacity:0;visibility:hidden}
.aa-siding .aa-sd-ok{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border-radius:9999px;background:var(--w-10);color:#fff;font-weight:500}
.aa-siding .aa-sd-done{margin:0;font:400 12px/28px var(--mono);color:var(--ok-d);white-space:nowrap}
.aa-siding .aa-sd-done .p{font-size:12.5px}

.aa-siding .aa-sd-demo{margin:16px 0 0;font:400 11px/16px var(--mono);color:var(--w-35)}

/* narrower desktop stages: the sheet tightens */
@container (max-width:999px){
  .aa-siding .aa-sd-sheet{padding:18px}
  .aa-siding .aa-sd-dl>div{grid-template-columns:76px minmax(0,1fr)}
  .aa-siding .aa-sd-done{white-space:normal;line-height:20px;padding:4px 0}
}

/* phones and narrow columns: the wire turns vertical */
@container (max-width:799px){
  .aa-siding .aa-sd-stage{height:640px}
  .aa-siding .aa-sd-h{display:none}
  .aa-siding .aa-sd-v{display:block}
  /* the four senders as a 2×2 block beside the rail: an inline run wrapped with a separator stranded at a line end */
  .aa-siding .aa-sd-agents{left:40px;right:0;top:0;width:auto;display:grid;grid-template-columns:repeat(2,max-content);column-gap:20px;row-gap:4px}
  .aa-siding .aa-sd-agents li{position:static;font-size:10px;line-height:14px}
  .aa-siding .aa-sd-lbl-tick{left:40px;top:143.5px;translate:none}
  .aa-siding .aa-sd-lbl-end{left:40px;right:auto;top:593px}
  .aa-siding .aa-sd-lbl-held{left:68px;top:169px;font-size:10px}
  .aa-siding .aa-sd-sheet{left:68px;top:190px;bottom:auto;width:auto;right:0;max-width:360px;padding:16px}
  .aa-siding .aa-sd-hd{font-size:12.5px;line-height:18px}
  .aa-siding .aa-sd-now{display:none}
  .aa-siding .aa-sd-dl{margin-top:10px}
  .aa-siding .aa-sd-dl>div{grid-template-columns:62px minmax(0,1fr)}
  .aa-siding .aa-sd-dl dt,.aa-siding .aa-sd-dl dd{font-size:11px;line-height:18px}
  .aa-siding .aa-sd-dl dd.p,.aa-siding .aa-sd-done .p{font-size:12px}
  .aa-siding .aa-sd-foot{margin-top:12px}
  .aa-siding .aa-sd-acts{gap:14px;font-size:12.5px}
  .aa-siding .aa-sd-ok{padding:0 11px 0 9px}
  .aa-siding .aa-sd-done{font-size:11px;line-height:18px;padding:5px 0;white-space:normal}
}
@media (max-width:760px){
  .aa-siding .aa-sd-demo{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .aa-siding .aa-sd-cv{display:none!important}
  .aa-siding .aa-sd-still{display:inline!important}
}
@media (forced-colors:active){
  .aa-siding .aa-sd-cv,.aa-siding .aa-sd-still,.aa-siding .aa-sd-pause{display:none!important}
  .aa-siding .aa-sd-svg path{stroke:CanvasText!important}
  .aa-siding .aa-sd-sheet{border:1px solid CanvasText}
}
@media print{
  .aa-siding .aa-sd-cv{display:none!important}
  .aa-siding .aa-sd-still{display:inline!important}
  .aa-siding .aa-sd-sheet,.aa-siding .aa-sd-sheet *,.aa-siding .aa-sd-lbl-tick,.aa-siding .aa-sd-lbl-end,.aa-siding .aa-sd-agents li{opacity:1!important;transform:none!important;visibility:visible!important}
  .aa-siding .aa-sd-acts{display:none!important}
  .aa-siding .aa-sd-sid,.aa-siding .aa-sd-teth{stroke-dashoffset:0!important}
}

/* page-owned .shead in the 05 band: v4.css has no dark .body colour, so scope one to the section (id="approve") */
#approve .shead .body{color:var(--w-60)}