/* Hero: "the desk that clears itself" */
.hd-anim{position:relative;height:440px;display:flex;align-items:center;color:var(--fg1);font-size:13px}
.hd-card{position:relative;width:100%;background:var(--neutrals-white);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,0.30);padding:14px 16px 12px;opacity:0;transform:translateY(-14px)}
.hd-anim.play .hd-card{animation:hd-in 600ms ease forwards}
@keyframes hd-in{to{opacity:1;transform:none}}
.hd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--border-soft)}
.hd-title{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--brand-500)}
.hd-title .ph{font-size:15px;color:var(--primary)}
.hd-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--fg2);white-space:nowrap}
.hd-status .hd-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background-color 250ms ease}
.hd-anim[data-state="working"] .hd-status .hd-dot{background:var(--primary);animation:hd-pulse 900ms ease-in-out infinite}
.hd-anim[data-state="done"] .hd-status .hd-dot{background:var(--success-600, #29a334)}
@keyframes hd-pulse{50%{opacity:0.35}}
.hd-tasks{display:flex;flex-direction:column}
.hd-task{position:relative;display:flex;align-items:center;gap:10px;height:47px;border-bottom:1px solid var(--border-soft);overflow:hidden;transition:height 400ms cubic-bezier(0.4,0,0.2,1),opacity 300ms ease,border-color 300ms ease,padding 400ms ease;font-size:12.5px}
.hd-task:last-child{border-bottom:0}
.hd-check{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--neutrals-white);font-size:11px;transition:background-color 250ms ease,border-color 250ms ease}
.hd-check .ph{opacity:0;transition:opacity 200ms ease}
.hd-sweep{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--brand-500);display:flex;align-items:center;justify-content:center;color:var(--neutrals-white);box-shadow:0 4px 10px rgba(1,56,6,0.25);opacity:0;pointer-events:none;z-index:2}
.hd-sweep svg{display:block;width:14px;height:auto}
.hd-task.done .hd-sweep{animation:hd-sweep 900ms cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes hd-sweep{0%{left:0;opacity:0}12%{opacity:1}60%{opacity:1}100%{left:100%;opacity:0}}
.hd-task.done .hd-check{background:var(--primary);border-color:var(--primary)}
.hd-task.done .hd-check .ph{opacity:1}
.hd-ic{flex:none;font-size:16px;color:var(--fg2)}
.hd-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.hd-task.done .hd-lbl{color:var(--fg2);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fg2) 50%, transparent)}
.hd-task.gone{height:0;opacity:0;border-color:transparent}
.hd-task.human .hd-ic{color:var(--primary)}
.hd-task.focus{background:color-mix(in srgb,var(--primary) 7%, transparent);border-radius:8px;padding:0 10px;margin:2px -10px 0;border-color:transparent}
.hd-task.focus .hd-check{border-style:dashed;border-color:var(--brand-300)}
.hd-summary{display:flex;align-items:center;gap:8px;height:0;margin-top:0;padding:0 12px;border-radius:8px;background:color-mix(in srgb,var(--primary) 8%, transparent);border:1px solid transparent;color:var(--primary);font-size:12.5px;font-weight:600;opacity:0;overflow:hidden;transition:height 400ms cubic-bezier(0.4,0,0.2,1),margin-top 400ms cubic-bezier(0.4,0,0.2,1),opacity 300ms ease 250ms}
.hd-anim[data-state="done"] .hd-summary{border-color:color-mix(in srgb,var(--primary) 45%, transparent)}
.hd-summary .ph{font-size:15px}
.hd-anim[data-state="done"] .hd-summary{height:42px;margin-top:10px;opacity:1}
.hd-foot-row{display:flex;justify-content:flex-end;margin-top:11px;min-height:28px}
.hd-replay{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border-soft);border-radius:50%;background:var(--neutrals-white);color:var(--fg2);font-family:inherit;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 300ms ease,color 300ms ease,border-color 300ms ease}
.hd-replay .ph{font-size:14px}
.hd-replay:hover{color:var(--primary);border-color:var(--brand-300)}
.hd-anim[data-state="done"] .hd-replay{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.hd-task{transition:none}}