/* #human: "Why Validator". Three proof cards on base .card .lift .tc, one accent per card (--c, --tint).
 * Each plate plays one small process once the card is revealed, then holds. The drawn end state is the
 * default: without the shell, without JS and with reduced motion the plates show their final still. */
#human .hu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
#human .hu .tc-art{container-type:inline-size;min-height:132px;display:flex;align-items:center;justify-content:center;padding:18px 24px}
#human .hu .tc-body{display:flex;flex-direction:column;flex:1 1 auto;padding:24px 28px 30px}
#human .hu h3{margin-top:12px;font-size:21px}
#human .hu .tc-body > p:last-child{margin-top:8px;font-size:15px;line-height:1.65;color:var(--body)}

/* stat line: big number in the card colour, short label beside it */
#human .hu-stat{display:flex;align-items:center;gap:14px;margin:0}
#human .hu-stat b{flex:none;font-size:clamp(40px,1.4vw + 24px,52px);font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--c)}
#human .hu-stat small{font-size:13px;font-weight:500;line-height:1.4;color:var(--muted);text-wrap:balance}

/* ---------- Card 1: 100 testers fill column by column while the clock completes one turn ---------- */
#human .hu-run{display:flex;align-items:center;justify-content:center;gap:18px;width:100%}
#human .hu-dots{--cell:9px;position:relative;flex:none;width:calc(var(--cell) * 20);height:calc(var(--cell) * 5);
  background:radial-gradient(circle,#dde3ea 2.3px,transparent 2.8px) 0 0/var(--cell) var(--cell)}
#human .hu-dots::after{content:"";position:absolute;inset:0;clip-path:inset(0 0 0 0);
  background:radial-gradient(circle,var(--orange) 2.6px,transparent 3.1px) 0 0/var(--cell) var(--cell)}
#human .hu-clock{flex:none;width:56px;height:56px}
@supports (width:1cqi){#human .hu-dots{--cell:clamp(7px,(100cqi - 78px) / 20,11px)}}
#human .hu-hand{transform-box:view-box;transform-origin:28px 28px}

/* ---------- Card 2: one finding and the proof it carries ---------- */
#human .hu-find{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #e6ebf1;box-shadow:0 8px 20px -16px rgba(12,21,41,.22)}
#human .hu-shot{position:relative;flex:none;width:40px;height:52px;border-radius:6px;border:1px solid #dfe5ec;
  background:linear-gradient(#eef2f6 0 0) 6px 7px/18px 4px no-repeat,linear-gradient(#eef2f6 0 0) 6px 15px/26px 4px no-repeat,
    linear-gradient(#eef2f6 0 0) 6px 23px/22px 4px no-repeat,linear-gradient(#d3e9f5 0 0) 6px 40px/26px 6px no-repeat,#fff}
#human .hu-shot::after{content:"";position:absolute;left:2px;top:19px;width:32px;height:12px;border-radius:4px;border:1.5px dashed var(--blue)}
#human .hu-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
#human .hu-chips li{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
#human .hu-chips .is-obs{color:var(--blue-ink);background:color-mix(in srgb,var(--blue) 11%,#fff);border:1px solid color-mix(in srgb,var(--blue) 32%,#fff)}
#human .hu-chips .is-rep{color:var(--blue-ink);background:#fff;border:1px solid color-mix(in srgb,var(--blue) 40%,#fff)}
#human .hu-chips .is-per{color:var(--green-ink);background:color-mix(in srgb,var(--green) 12%,#fff);border:1px solid color-mix(in srgb,var(--green) 34%,#fff)}
@container (max-width:300px){#human .hu-shot{display:none}}

/* ---------- Card 3: a tester takes a wrong turn, goes back and reaches the goal ---------- */
#human .hu-path{width:100%;max-width:340px;height:auto;overflow:visible}
#human .hu-lbl{font-size:13px;font-weight:500;fill:var(--muted)}
#human .hu-trail{stroke-dasharray:1}
#human .hu-walker{filter:drop-shadow(0 2px 3px rgba(43,127,87,.3))}
#human .hu-goal{transform-box:fill-box;transform-origin:50% 50%}
/* the label scales with the plate: keep it at 12 px or more on narrow plates */
@container (max-width:290px){#human .hu-lbl{font-size:15px}}
@container (max-width:240px){#human .hu-lbl{font-size:17px}}

/* ---------- Motion (only under the shell's .motion, only once the card is in) ---------- */
@media (prefers-reduced-motion:no-preference){
  #human .hu-dots::after{transition:clip-path 1.5s steps(20,end) calc(var(--rd,0s) + .45s)}
  #human .hu-ring{transition:stroke-dashoffset 1.5s linear calc(var(--rd,0s) + .45s)}
  #human .hu-hand{transition:transform 1.5s linear calc(var(--rd,0s) + .45s)}
  #human:is(.motion *) .rv:not(.is-in) .hu-dots::after{clip-path:inset(0 100% 0 0)}
  #human:is(.motion *) .rv:not(.is-in) .hu-ring{stroke-dashoffset:1}
  #human:is(.motion *) .rv:not(.is-in) .hu-hand{transform:rotate(-360deg)}

  #human .hu-chips li{transition:opacity .4s ease calc(var(--rd,0s) + .4s + var(--k,0) * .13s),transform .5s var(--spring) calc(var(--rd,0s) + .4s + var(--k,0) * .13s)}
  #human .hu-shot::after{transition:opacity .4s ease calc(var(--rd,0s) + .3s)}
  #human:is(.motion *) .rv:not(.is-in) .hu-chips li{opacity:0;transform:translateY(6px) scale(.9)}
  #human:is(.motion *) .rv:not(.is-in) .hu-shot::after{opacity:0}

  /* Animations sit paused until reveal (base.css), then play once and hold on the last frame. */
  #human:is(.motion *) .hu-walker{animation:hu-walk 2.6s linear calc(var(--rd,0s) + .5s) both}
  #human:is(.motion *) .hu-trail{animation:hu-trail 2.6s linear calc(var(--rd,0s) + .5s) both}
  #human:is(.motion *) .hu-goal{animation:hu-goal .5s var(--spring) calc(var(--rd,0s) + 3s) both}
}
@keyframes hu-walk{0%{transform:translate(-238px,0)}23.3%{transform:translate(-150px,0)}36.8%,46.8%{transform:translate(-110px,32px)}60.3%{transform:translate(-150px,0)}100%{transform:translate(0,0)}}
@keyframes hu-trail{0%{stroke-dashoffset:1}23.3%{stroke-dashoffset:.7415}36.8%,46.8%{stroke-dashoffset:.5911}60.3%{stroke-dashoffset:.4407}100%{stroke-dashoffset:0}}
@keyframes hu-goal{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}

/* Desktop: plates share one height and the bodies start on one line */
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    #human .hu-grid{grid-template-rows:auto 1fr}
    #human .hu{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
  }
}
@media (max-width:900px){#human .hu-grid{grid-template-columns:1fr}}

/* ---------- Phones (21 Oct 2026): the three proof cards become one swipe row ---------- */
@media (max-width:640px){
  #human .hu-grid{display:flex;gap:12px;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 18px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  #human .hu-grid::-webkit-scrollbar{display:none}
  #human .hu{flex:0 0 min(320px,calc(100% - 36px));scroll-snap-align:start}
  #human .hu .tc-art{min-height:92px;padding:12px 16px}
  #human .hu .tc-body{padding:18px 18px 22px}
  #human .hu-stat{gap:12px}
  #human .hu-stat b{font-size:36px}
  #human .hu-stat small{font-size:12.5px;line-height:1.35}
  #human .hu h3{margin-top:10px;font-size:18.5px;line-height:1.3}
  #human .hu .tc-body > p:last-child{font-size:14px;line-height:1.55}
  #human .hu-clock{width:48px;height:48px}
  #human .hu-run{gap:14px}
  #human .hu-find{padding:8px 10px;box-shadow:none}
  #human .hu-shot{display:none}
}