/* chop widget: the cleaver, the sample paper and the records. Selectors are all under .w-chop. */
.w-chop{display:grid;gap:12px;justify-items:start;--drop:92}
.w-chop-stage{position:relative;width:100%;display:grid;padding-top:70px}
.w-chop-paper,.w-chop-records{grid-area:1/1}
.w-chop-paper{margin:0;padding:12px;background:#fff;border:3px solid var(--ink);box-shadow:var(--shadow);transform:rotate(-.6deg);transition:transform var(--t-story) var(--ease),opacity var(--t-base)}
.w-chop-paper figcaption{margin-bottom:8px;font:700 13px var(--sans);letter-spacing:.04em}
.w-chop-paper table{width:100%;border-collapse:collapse;font:400 17px var(--serif)}
.w-chop-paper th{text-align:left;font:700 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.w-chop-paper td,.w-chop-paper th{padding:6px 8px;border-bottom:1px dashed rgba(23,35,46,.45)}
.w-chop-doubt{font-style:italic;text-decoration:underline wavy var(--warm)}
.w-chop-doubt span{color:var(--warm-deep);font-weight:700;margin-left:2px}
.w-chop-records{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start}
.w-chop-records li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:8px 12px;background:var(--card);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.w-chop-records b{font:700 16px var(--sans)}
.w-chop-records span{font:600 15px var(--sans);text-align:right}
.w-chop-records em{grid-column:1/-1;font:600 13px var(--sans);font-style:normal;color:var(--go)}
.w-chop-records li.w-chop-check{border-style:dashed;background:#fff3dc}
.w-chop-check em{color:var(--warm-deep)}
.w-chop-cleaver,.w-chop-cut{display:none}
/* with script: records wait until the cut */
.w-chop.on .w-chop-records li{opacity:0;transform:translateY(12px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.w-chop.on .w-chop-records li:nth-child(2){transition-delay:80ms}.w-chop.on .w-chop-records li:nth-child(3){transition-delay:160ms}.w-chop.on .w-chop-records li:nth-child(n+4){transition-delay:240ms}
.w-chop.on.cut .w-chop-records li{opacity:1;transform:none}
.w-chop.on.cut .w-chop-paper{opacity:0;transform:translateY(12px) scale(.96)}
.w-chop.on .w-chop-cleaver{display:block;position:absolute;left:calc(50% - 60px);top:0;width:120px;z-index:2;pointer-events:none;transform-origin:50% 100%;will-change:transform}
.w-chop.on .w-chop-cut{display:block;position:absolute;left:0;right:0;top:170px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-base) var(--ease);z-index:1}
.w-chop.on.chop .w-chop-cut{transform:none}
.w-chop.on.done .w-chop-cleaver{opacity:.4}
.w-chop.on.done .w-chop-cut{opacity:0}
@media (prefers-reduced-motion:reduce){.w-chop-paper,.w-chop.on .w-chop-records li,.w-chop.on .w-chop-cut{transition:none}}
