/* Plinth motion kit: the waiting language from the "Good things taking shape" motion spec.
   Build rule: acknowledge the click immediately, keep unconfirmed work in progress, reveal the
   result only when it exists, and always leave a way out of a failure.
   Markup comes from js/plinth-motion.js. Self-contained: no images, fonts or remote assets. */

:root{
  --pm-ease:cubic-bezier(.22,1,.36,1);
  --pm-dur-state:.3s;
  --pm-dur-fill:.6s;
  --pm-dur-arrive:.46s;
  --pm-dur-reveal:.8s;
  --pm-stagger:40ms;
  --pm-loop-mark:4.8s;
  --pm-loop-library:5.5s;
  --pm-loop-script:4s;
  --pm-loop-evidence:6s;
  --pm-loop-turn:1.6s;
  --pm-loop-scan:1.6s;
  --pm-accent:var(--sig,#42624e);
  --pm-ink:var(--ink,#20372d);
  --pm-muted:var(--ink-3,#69746b);
  --pm-line:var(--line-2,#d8ddd2);
  --pm-surface:var(--card,#fafaf6);
  --pm-fail:#b5654a;
}

/* 01 A mark with substance: three layered planes that settle apart and back together.
   .p86-loader is the legacy inline loader other modules still emit; it draws the same mark. */
.pm-mark,.p86-loader{--s:20px;position:relative;display:inline-block;flex:none;width:calc(var(--s)*2);height:calc(var(--s)*1.9);min-width:0;gap:0;font-size:0;vertical-align:middle;color:var(--pm-accent)}
.pm-mark.is-sm,.p86-loader{--s:9px}
:is(.pm-mark,.p86-loader)>i:nth-child(n){position:absolute;left:0;top:var(--top);display:block;width:100%;height:calc(var(--s)*1.18);border-radius:0;
  background:color-mix(in srgb,currentColor 72%,#0b1a12);clip-path:polygon(50% 0,100% 42.4%,100% 57.6%,50% 100%,0 57.6%,0 42.4%);
  transform:translateY(var(--lift));opacity:1;animation:pm-plate var(--pm-loop-mark) var(--pm-ease) infinite;animation-delay:var(--delay)}
:is(.pm-mark,.p86-loader)>i:nth-child(n)::before{content:'';position:absolute;inset:0 0 auto;height:84.7%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--face)}
:is(.pm-mark,.p86-loader)>i:nth-child(1){--top:calc(var(--s)*.72);--lift:0px;--delay:0s;--face:color-mix(in srgb,currentColor 58%,var(--pm-surface))}
:is(.pm-mark,.p86-loader)>i:nth-child(2){--top:calc(var(--s)*.36);--lift:calc(var(--s)*.36);--delay:.12s;--face:color-mix(in srgb,currentColor 30%,var(--pm-surface))}
:is(.pm-mark,.p86-loader)>i:nth-child(3){--top:0px;--lift:calc(var(--s)*.72);--delay:.24s;--face:color-mix(in srgb,currentColor 12%,var(--pm-surface))}
:is(.pm-mark,.p86-loader)>i:nth-child(3)::after{content:'';position:absolute;left:32%;right:32%;top:27.1%;height:30.5%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:currentColor}
@keyframes pm-plate{0%,100%{transform:translateY(var(--lift))}36%,64%{transform:translateY(0)}}

/* A wait block's mark with its caption, as the spec's "Preparing your workspace" card. */
.pm-wait-mark{display:grid;justify-items:center;gap:11px;margin-bottom:4px;font-size:11.5px;color:var(--pm-muted)}
.pm-inline{display:flex;align-items:center;justify-content:center;gap:12px;min-height:90px;font-size:13px;color:var(--ink-2,var(--pm-muted))}

/* 02 Content takes its place: the shape of what is coming settles while it loads. */
.pm-skel{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px}
.pm-skel>i{display:block;animation-timing-function:var(--pm-ease);animation-iteration-count:infinite}
.pm-skel>i:nth-child(2){animation-delay:.16s}.pm-skel>i:nth-child(3){animation-delay:.32s}
.pm-skel.is-reels>i{position:relative;width:58px;aspect-ratio:9/16;overflow:hidden;border:2px solid var(--pm-surface);border-radius:4px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--pm-accent) 9%,var(--pm-surface)),color-mix(in srgb,var(--pm-accent) 30%,var(--pm-surface)));
  box-shadow:0 1px 1px rgb(0 0 0/.08),0 10px 16px -8px rgb(0 0 0/.22);animation-name:pm-drift;animation-duration:var(--pm-loop-library)}
.pm-skel.is-reels>i:nth-child(2){margin-top:-14px}.pm-skel.is-reels>i:nth-child(3){margin-top:8px}
.pm-skel.is-reels>i::after{content:'';position:absolute;left:6px;right:6px;bottom:7px;height:2px;border-radius:1px;background:color-mix(in srgb,var(--pm-surface) 70%,transparent);box-shadow:0 -5px 0 -1px color-mix(in srgb,var(--pm-surface) 45%,transparent)}
.pm-skel.is-rows{display:grid;gap:8px;width:260px;max-width:100%;margin-inline:auto}
.pm-skel.is-rows>i{display:flex;align-items:center;gap:10px;height:30px;padding:0 11px;border:1px solid var(--pm-line);border-radius:4px;background:var(--pm-surface);animation-name:pm-settle;animation-duration:var(--pm-loop-script)}
.pm-skel.is-rows>i::before{content:'';flex:none;width:15px;height:15px;border-radius:3px;background:color-mix(in srgb,var(--pm-accent) 20%,var(--pm-surface))}
.pm-skel.is-rows>i::after{content:'';flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--pm-accent) 32%,var(--pm-surface));transform-origin:left;animation:pm-write var(--pm-loop-script) var(--pm-ease) infinite;animation-delay:inherit}
.pm-skel.is-rows>i:nth-child(2)::after{margin-right:22%}.pm-skel.is-rows>i:nth-child(3)::after{margin-right:38%}
@keyframes pm-drift{0%,100%{transform:translateY(5px);opacity:.83}40%,65%{transform:translateY(-3px);opacity:1}}
@keyframes pm-settle{0%,100%{transform:translateY(3px);opacity:.55}25%,85%{transform:none;opacity:1}}
@keyframes pm-write{0%,100%{transform:scaleX(.65);opacity:.55}45%,75%{transform:scaleX(1);opacity:1}}

/* 04 Measured progress: a precise fill that only moves to confirmed values, with a travelling highlight. */
.pm-track{position:relative;display:block;height:3px;overflow:hidden;background:var(--pm-line)}
.pm-track>i{position:relative;display:block;height:100%;overflow:hidden;background:var(--pm-accent);transition:width var(--pm-dur-fill) var(--pm-ease)}
.pm-track>i::after{content:'';position:absolute;inset:0 auto 0 0;width:48px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pm-surface) 65%,transparent),transparent);animation:pm-scan var(--pm-loop-scan) ease-in-out infinite}
@keyframes pm-scan{from{transform:translateX(-48px)}to{transform:translateX(160px)}}

/* 05 Evidence coming together: signals travel from each source into one brief. Decorative only:
   it claims nothing about which source has answered. */
.pm-evidence{display:grid;grid-template-columns:30px 46px minmax(0,1fr);align-items:center;width:250px;max-width:100%;margin:2px auto 6px;color:var(--pm-accent)}
.pm-ev-sources{display:grid;gap:16px}
.pm-ev-sources svg{display:block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:pm-signal var(--pm-loop-evidence) ease-in-out infinite}
.pm-ev-sources svg:nth-child(2){animation-delay:1s}.pm-ev-sources svg:nth-child(3){animation-delay:2s}
.pm-ev-links{width:46px;height:104px;fill:none;stroke:var(--pm-line);stroke-width:.9}
.pm-ev-links .pm-packet{stroke:var(--pm-accent);stroke-width:1.4;stroke-dasharray:8 92;stroke-dashoffset:100;animation:pm-packet var(--pm-loop-evidence) linear infinite}
.pm-ev-links .pm-packet:nth-of-type(2){animation-delay:1s}.pm-ev-links .pm-packet:nth-of-type(3){animation-delay:2s}
.pm-ev-doc{position:relative;display:grid;gap:7px;padding:14px 12px 13px;border:1px solid var(--pm-line);border-radius:3px;background:var(--pm-surface);box-shadow:3px 4px 0 color-mix(in srgb,var(--pm-accent) 10%,transparent)}
.pm-ev-doc>i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--pm-accent) 34%,var(--pm-surface));transform-origin:left;animation:pm-write var(--pm-loop-evidence) var(--pm-ease) infinite}
.pm-ev-doc>i:first-child{width:62%;height:5px;margin-bottom:3px;background:color-mix(in srgb,var(--pm-accent) 58%,var(--pm-surface))}
.pm-ev-doc>i:nth-child(2){animation-delay:1.2s}.pm-ev-doc>i:nth-child(3){width:84%;animation-delay:2.2s}.pm-ev-doc>i:nth-child(4){width:70%;animation-delay:3.2s}
@keyframes pm-packet{0%{stroke-dashoffset:100;opacity:0}10%{opacity:1}55%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes pm-signal{0%,100%{opacity:.4}25%,70%{opacity:1}}

/* 08 Connected steps share this turning ring for the step in progress. */
@keyframes pm-turn{to{transform:rotate(360deg)}}

/* 09 An arrival, not a jump: content settles in once (rows add a capped --i stagger). pm-reveal is the finished result replacing its loader. */
@keyframes pm-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pm-reveal{from{opacity:0;transform:scale(1.03);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes pm-fade{from{opacity:0}to{opacity:1}}

/* Reduced motion: every loop holds a still, legible frame; arrivals keep only their fade. */
@media (prefers-reduced-motion:reduce){
  :is(.pm-mark,.p86-loader)>i:nth-child(n),.pm-skel>i,.pm-skel>i::after,.pm-ev-sources svg,.pm-ev-doc>i,.pm-ev-links .pm-packet,.pm-track>i::after{animation:none!important}
  :is(.pm-mark,.p86-loader)>i:nth-child(n),.pm-skel>i,.pm-skel>i::after,.pm-ev-doc>i{transform:none;opacity:1}
  .pm-ev-links .pm-packet{stroke-dasharray:none;stroke-dashoffset:0;opacity:.7}
  .pm-track>i::after{display:none}
  .pm-track>i{transition:none}
  html :is(tbody tr,.rise,#view){animation:pm-fade .2s linear backwards!important;animation-delay:0s!important}
}