/* ent-evidence-receipt · signed receipt, printed, with the auditor's questions
   Scoped under .ea-evidence. Uses v4.css tokens. Timing tokens are declared on the root until they move to :root. */
.ea-evidence{
  --ea-t1:120ms;--ea-t2:200ms;--ea-t3:320ms;--ea-t4:560ms;--ea-t5:900ms;--ea-t6:1600ms;--ea-t7:2400ms;
  --ea-draw:var(--ease-draw,cubic-bezier(.45,.05,.25,1));
  --ea-ice:rgba(179,219,255,.45);
  --ea-stamp:rgba(36,132,48,.88);
  --ea-pad:28px;
  position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;
}

/* questions: plain list, hairline rules, no boxes */
.ea-evidence .ea-ev-qs{grid-column:1/span 5;min-width:0}
.ea-evidence .ea-ev-list{border-top:1px solid var(--ink-08)}
.ea-evidence .ea-ev-q{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);min-height:112px;padding:22px 0 24px;border-bottom:1px solid var(--ink-08)}
.ea-evidence .ea-ev-n{font:500 11px/28px var(--mono);letter-spacing:.02em;color:var(--ink-40);transition:color var(--ea-t2) var(--ease)}
.ea-evidence .ea-ev-qt{min-width:0}
.ea-evidence .ea-ev-h{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.012em;color:var(--ink);transition:color var(--ea-t2) var(--ease)}
.ea-evidence .ea-ev-a{margin-top:6px;font-size:15px;line-height:23px;color:var(--ink-60);max-width:440px}
.ea-evidence .ea-ev-go{white-space:nowrap;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--ea-t1)}
.ea-evidence .ea-ev-go:hover{text-decoration-color:var(--ink-40)}
.ea-evidence .ea-ev-foot{margin:20px 0 0 44px;font-size:13px;line-height:20px;color:var(--ink-40)}

/* the stage: a hairline slot the slip hangs from */
.ea-evidence .ea-ev-stage{grid-column:7/span 5;justify-self:center;position:relative;width:372px;max-width:100%;padding-top:4px}
.ea-evidence .ea-ev-slot{position:absolute;left:-32px;right:-32px;top:0;height:1px;background:var(--ink-15)}
.ea-evidence .ea-ev-slot::before,.ea-evidence .ea-ev-slot::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--ink-15)}
.ea-evidence .ea-ev-slot::before{left:0}
.ea-evidence .ea-ev-slot::after{right:0}

/* the slip: white paper, square corners, a slight tilt, one paper shadow */
.ea-evidence .ea-ev-slip{position:relative;transform:rotate(-.6deg);transform-origin:50% 0;box-shadow:0 1px 0 rgba(10,10,10,.04),0 18px 36px -18px rgba(10,10,10,.18)}
.ea-evidence .ea-ev-paper{position:relative;background:#fff;padding:26px var(--ea-pad) 6px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) bottom/12px 6px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) bottom/12px 6px repeat-x}
.ea-evidence .ea-ev-brand{display:flex;align-items:center;gap:9px;font:500 11px/16px var(--mono);letter-spacing:.18em;color:var(--ink-80)}
.ea-evidence .ea-ev-mark{display:block;width:36px;height:11px;background:currentColor; /* 36x11 = one CSS px per mark cell: crisp at 1x and 2x */
  -webkit-mask:url(/assets/mark-pixel-sm.svg) 0 0/36px 11px no-repeat;mask:url(/assets/mark-pixel-sm.svg) 0 0/36px 11px no-repeat}
.ea-evidence .ea-ev-title{margin-top:16px;font:500 15px/22px var(--sans);letter-spacing:-.005em;color:var(--ink)}
.ea-evidence .ea-ev-id{font:12px/20px var(--mono);color:var(--ink-60)}
.ea-evidence .ea-ev-dim{color:var(--ink-40)}
.ea-evidence .ea-ev-rule{height:0;border:0;border-top:1px dashed var(--ink-15);margin:14px 0 9px}
.ea-evidence .ea-ev-r{display:grid;grid-template-columns:96px minmax(0,1fr);padding:3px 0;font:12px/20px var(--mono);color:var(--ink-80)}
.ea-evidence .ea-ev-k{color:var(--ink-40)}
.ea-evidence .ea-ev-v{min-width:0}
.ea-evidence .ea-ev-v b{font-weight:500;color:var(--ink)}
.ea-evidence .ea-ev-nw{white-space:nowrap}
.ea-evidence .ea-ev-hash{display:inline-block;vertical-align:top;white-space:nowrap;overflow:hidden;max-width:calc(var(--n,40) * 1ch)}
.ea-evidence .ea-ev-cur{display:inline-block;width:7px;height:14px;margin-left:1px;vertical-align:-3px;background:var(--ink-80);opacity:0}
.ea-evidence .ea-ev-cur.is-on{opacity:1}
.ea-evidence .ea-ev-ver .ea-ev-v{color:var(--ok)}

/* answer targets: a highlighter band behind the line(s), numerals in the right margin, a leader anchor on the paper edge */
.ea-evidence .ea-ev-t{position:relative;isolation:isolate}
.ea-evidence .ea-ev-hl{position:absolute;left:-10px;right:-10px;top:1px;bottom:1px;z-index:-1;background:var(--ea-ice);transform:scaleX(0);transform-origin:0 50%}
.ea-evidence .ea-ev-num{position:absolute;right:-19px;top:3px;font:500 10px/20px var(--mono);color:var(--ink-40)}
.ea-evidence .ea-ev-anc{position:absolute;left:calc(-1 * var(--ea-pad));top:50%;width:1px;height:1px;pointer-events:none}

/* the ink stamp: double rule, speckled, pressed at -8deg */
.ea-evidence .ea-ev-stampzone{display:flex;justify-content:flex-end;padding:6px 16px 32px 0}
.ea-evidence .ea-ev-stamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 14px 8px;color:var(--ea-stamp);border:1.5px solid currentColor;transform:rotate(-8deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -6 4.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 110px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -6 4.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/220px 110px}
.ea-evidence .ea-ev-stamp::before{content:"";position:absolute;inset:2.5px;border:1px solid currentColor}
.ea-evidence .ea-ev-stamp b{font:600 16px/18px var(--mono);letter-spacing:.22em;margin-right:-.22em}
.ea-evidence .ea-ev-stamp span{font:500 10px/12px var(--mono);letter-spacing:.01em}

/* perforation and stub */
.ea-evidence .ea-ev-perf{display:block;height:2px;margin:0 calc(-1 * var(--ea-pad));background:radial-gradient(circle,var(--ink-15) 0 .9px,transparent 1.15px) 3px 0/8px 2px repeat-x}
.ea-evidence .ea-ev-stub{display:flex;justify-content:space-between;gap:12px;padding:11px 0 14px;font:11px/16px var(--mono);color:var(--ink-40)}

/* leaders: 1px ink-40 hairline ending in a 5px Hawcx-blue dot (Hawcx's own act: the check that answers) */
.ea-evidence .ea-ev-lead{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ea-evidence .ea-ev-lead path{fill:none;stroke:var(--ink-40);stroke-width:1;stroke-dasharray:1 2;stroke-dashoffset:1}
.ea-evidence .ea-ev-lead circle{fill:var(--blue);opacity:0}
.ea-evidence:not(.ea-live) .ea-ev-lead{display:none}

/* ---- live (JS, motion allowed): rewind, then play ---- */
.ea-evidence.ea-live .ea-ev-num{display:none}
.ea-evidence.ea-live .ea-ev-h{color:var(--ink-60)} /* resting titles never lighter than their answers */
.ea-evidence.ea-live .ea-ev-n{color:var(--ink-40)}
.ea-evidence.ea-live .ea-ev-slip{clip-path:inset(0 -56px 100% -56px)}
.ea-evidence.ea-live .ea-ev-slip.is-fed{clip-path:inset(0 -56px -72px -56px);transition:clip-path 1400ms var(--ease-io)}
.ea-evidence.ea-live .ea-ev-pl{opacity:0;transform:translateY(2px)}
.ea-evidence.ea-live .ea-ev-pl.is-p{opacity:1;transform:none;transition:opacity var(--ea-t2) linear,transform var(--ea-t2) var(--ease)}
.ea-evidence.ea-live .ea-ev-ver{opacity:0}
.ea-evidence.ea-live .ea-ev-ver.is-p{opacity:1;transition:opacity var(--ea-t2) linear}
.ea-evidence.ea-live .ea-ev-stamp{opacity:0;transform:rotate(-8deg) scale(1.04)}
.ea-evidence.ea-live .ea-ev-stamp.is-p{opacity:1;transform:rotate(-8deg);transition:opacity 80ms linear,transform 180ms var(--ease)}

/* question states: on (loop), pin (hover/focus/tap), fade (out) */
.ea-evidence .ea-ev-q.is-on .ea-ev-h,.ea-evidence .ea-ev-q.is-on .ea-ev-n{color:var(--ink)}
.ea-evidence .ea-ev-t.is-on .ea-ev-hl{transform:scaleX(1);transition:transform var(--ea-t3) var(--ease) 400ms}
.ea-evidence .ea-ev-t.is-fade .ea-ev-hl{transform:scaleX(1);opacity:0;transition:opacity 240ms linear}
.ea-evidence .ea-ev-lead g.is-on path{stroke-dashoffset:0;transition:stroke-dashoffset 400ms var(--ea-draw)}
.ea-evidence .ea-ev-lead g.is-on circle{opacity:1;transition:opacity var(--ea-t1) linear 340ms}
.ea-evidence .ea-ev-lead g.is-fade path{stroke-dashoffset:0;opacity:0;transition:opacity 240ms linear}
.ea-evidence .ea-ev-lead g.is-fade circle{opacity:0;transition:opacity 240ms linear}
.ea-evidence .ea-ev-t.is-pin .ea-ev-hl{transition:transform var(--ea-t2) var(--ease)}
.ea-evidence .ea-ev-lead g.is-pin path{transition:stroke-dashoffset var(--ea-t2) var(--ea-draw)}
.ea-evidence .ea-ev-lead g.is-pin circle{transition:opacity var(--ea-t1) linear 120ms}

/* ?sim=N captures: no transitions, the frame at N seconds */
.ea-evidence.ea-sim *,.ea-evidence.ea-sim *::before,.ea-evidence.ea-sim{transition:none!important;animation:none!important}

/* ---- tablet ---- */
@media (max-width:1100px){
  .ea-evidence .ea-ev-qs{grid-column:1/span 6}
  .ea-evidence .ea-ev-stage{grid-column:7/-1;justify-self:end;width:min(372px,100%)}
  .ea-evidence .ea-ev-slot{left:-20px;right:-8px}
}

/* ---- mobile: receipt first, list below, numerals printed, no leaders ---- */
@media (max-width:760px){
  .ea-evidence{grid-template-columns:minmax(0,1fr);row-gap:56px;--ea-pad:20px}
  .ea-evidence .ea-ev-r{grid-template-columns:92px minmax(0,1fr);font-size:11px}
  .ea-evidence .ea-ev-id{font-size:11px}
  .ea-evidence .ea-ev-stage{grid-column:1;grid-row:1;justify-self:center;width:min(340px,100%)}
  .ea-evidence .ea-ev-slot{left:-8px;right:-8px}
  .ea-evidence .ea-ev-qs{grid-column:1;grid-row:2}
  .ea-evidence .ea-ev-paper{padding-top:22px}
  .ea-evidence .ea-ev-num{right:-17px}
  .ea-evidence .ea-ev-stamp span{font-size:11px}
  .ea-evidence .ea-ev-lead{display:none}
  .ea-evidence.ea-live .ea-ev-num{display:block}
  .ea-evidence .ea-ev-q{grid-template-columns:36px minmax(0,1fr);min-height:0;padding:20px 0 22px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .ea-evidence .ea-ev-h{font-size:18px;line-height:26px}
  .ea-evidence .ea-ev-n{line-height:26px}
  .ea-evidence .ea-ev-foot{margin-left:36px}
}

/* ---- reduced motion: the composed final frame; hover may still show the band ---- */
@media (prefers-reduced-motion:reduce){
  .ea-evidence .ea-ev-slip{clip-path:none!important}
  .ea-evidence .ea-ev-pl,.ea-evidence .ea-ev-ver,.ea-evidence .ea-ev-stamp{opacity:1!important;transition:none!important}
  .ea-evidence .ea-ev-pl{transform:none!important}
  .ea-evidence .ea-ev-stamp{transform:rotate(-8deg)!important}
  .ea-evidence .ea-ev-lead{display:none!important}
  .ea-evidence .ea-ev-num{display:block!important}
  .ea-evidence .ea-ev-hl{transition:transform var(--ea-t1) linear!important}
}

/* print: the still */
@media print{
  .ea-evidence .ea-ev-lead{display:none}
  .ea-evidence .ea-ev-slip{clip-path:none!important;box-shadow:none}
  .ea-evidence .ea-ev-pl,.ea-evidence .ea-ev-ver,.ea-evidence .ea-ev-stamp{opacity:1!important}
  .ea-evidence .ea-ev-num{display:block!important}
}