.status{--tone:var(--gold);--tone-soft:var(--gold-soft);border:1px solid var(--line);border-radius:var(--r-xl);background:color-mix(in srgb, var(--panel) 86%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:min(100%,620px);box-shadow:var(--shadow-3), var(--rim);text-align:center;justify-items:center;gap:14px;margin-inline:auto;padding:clamp(28px,5vw,48px) clamp(20px,5vw,48px);display:grid;position:relative;overflow:hidden}.status--success{--tone:var(--gold);--tone-soft:var(--gold-soft)}.status--danger{--tone:var(--danger);--tone-soft:var(--danger-soft)}.status:before{content:"";background:linear-gradient(90deg, transparent, var(--tone), transparent);height:3px;position:absolute;inset:0 0 auto}.status__emblem{justify-items:center;gap:16px;margin-bottom:6px;padding-top:6px;display:grid;position:relative}.status__halo{background:radial-gradient(closest-side, var(--tone-soft), transparent);border-radius:50%;width:150px;height:150px;position:absolute;top:-30px}html:not([data-theme=dark]) .status__halo{background:radial-gradient(closest-side, var(--gold-softer), transparent)}.status__mark{color:var(--gold);position:relative}.status__bar{background:color-mix(in srgb, var(--color-text) 9%, transparent);border-radius:6px;width:168px;height:6px;display:block;position:relative;overflow:hidden}.status__fill{border-radius:inherit;background:var(--tone);transform-origin:0;position:absolute;inset:0}.status__gap{display:none}.status__meter{align-items:center;gap:6px;width:168px;display:flex}.status__meter .status__bar{flex:1;width:auto}.status__tick{color:var(--success);stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;flex:none}.status__tick circle{fill:var(--success-soft)}.status__tick path{stroke-dasharray:1}@media (prefers-reduced-motion:no-preference){.status--success .status__tick{animation:tick-pop .42s var(--ease-spring) 1.1s both}.status--success .status__tick path{animation:draw-stroke .36s var(--ease-out) 1.3s both}}.status--quiet{--tone:var(--ink-3);--tone-soft:color-mix(in srgb, var(--color-text) 6%, transparent)}.status--quiet .status__fill{display:none}.status--quiet .status__bar{background:color-mix(in srgb, var(--color-text) 5%, transparent);box-shadow:inset 0 0 0 1px var(--line-2);overflow:visible}.status--quiet .status__bar:after{content:"";background:var(--ink-3);border-radius:1px;width:2px;position:absolute;top:-5px;bottom:-5px;right:0}.status--danger .status__bar{background:0 0;overflow:visible}.status--danger .status__fill{clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);border-radius:6px 0 0 6px;right:54%}.status--danger .status__emblem{margin-bottom:18px}.status--danger .status__gap{background:var(--tone);opacity:.55;clip-path:polygon(5px 0,100% 0,100% 100%,0 100%);transform-origin:0 0;border-radius:0 6px 6px 0;display:block;position:absolute;inset:0 0 0 calc(46% + 6px);translate:3px 5px;rotate:5deg}.status--pending .status__fill{width:38%;right:auto;translate:80%}@media (prefers-reduced-motion:no-preference){.status--success .status__fill{animation:render-fill 1.3s var(--ease-out) both}.status--pending .status__fill{animation:render-run 1.4s var(--ease-in-out) infinite}}.status--info .status__bar{overflow:visible}.status--info .status__fill{border-radius:1px;width:2px;top:-4px;bottom:-4px;right:auto}.status--info .status__fill:before{content:"";border:5px solid #0000;border-top:6px solid var(--tone);border-bottom:0;position:absolute;top:-5px;left:-4px}.status__readout{letter-spacing:.08em;color:var(--gold-ink);flex:none;font-size:11px;font-weight:600}.status__meter:has(.status__readout){width:250px}.status__strip{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--color-text) 3%, transparent);color:var(--ink-3);letter-spacing:.08em;place-self:stretch stretch;align-items:center;gap:10px;margin:calc(-1*clamp(28px,5vw,48px)) calc(-1*clamp(20px,5vw,48px)) 6px;padding:11px clamp(20px,5vw,48px);font-size:10.5px;display:flex}.status__state{color:var(--tone-ink,var(--gold-ink));font-size:var(--fs-12);letter-spacing:0;white-space:nowrap;flex:none;font-weight:600;line-height:1}.status--danger{--tone-ink:var(--danger)}.status--quiet{--tone-ink:var(--ink-2)}.status__rec{background:var(--tone);width:8px;height:8px;box-shadow:0 0 0 3px var(--tone-soft);border-radius:50%;flex:none}.status__rule{background:linear-gradient(90deg, var(--line-2), transparent);flex:1;height:1px}@media (prefers-reduced-motion:no-preference){.status--pending .status__rec{animation:1.4s ease-in-out infinite status-rec}}@keyframes status-rec{50%{opacity:.3}}.status--celebrate{--tone:var(--gold);--tone-soft:var(--gold-soft)}@media (prefers-reduced-motion:no-preference){.status--celebrate .status__fill{animation:render-fill 1.3s var(--ease-out) both}.status--celebrate .status__tick{animation:tick-pop .42s var(--ease-spring) 1.1s both}.status--celebrate .status__tick path{animation:draw-stroke .36s var(--ease-out) 1.3s both}.status--celebrate .status__readout{animation:fade-in .3s var(--ease-out) 1.25s both}}.status__task{font-size:var(--fs-12);letter-spacing:0;color:var(--ink-2);flex:none;font-weight:500}.status__title{max-width:16em;font-size:clamp(1.625rem,1.2rem + 1.8vw,2.5rem);font-weight:600;line-height:1.32}.status__body{max-width:34em;font-size:var(--fs-16);color:var(--ink-2);text-wrap:balance;line-height:1.8}.status__body p{text-wrap:balance;margin:0}.status__body p+p{margin-top:10px}.status__actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}.status__actions form{margin:0}.status__body h2{font-size:var(--fs-h4);color:var(--ink);margin-bottom:6px;font-weight:600;line-height:1.5}@media (prefers-reduced-motion:no-preference){.status .mark-draw path{animation:draw-stroke .9s var(--ease-out) both}.status .mark-draw path:nth-child(2){animation-delay:.12s}.status .mark-draw path:nth-child(3){animation-delay:.24s}.status .mark-draw path:nth-child(4){animation-delay:.36s}}@keyframes tick-pop{0%{opacity:0;scale:.4}}@keyframes render-fill{0%{transform:scaleX(.04)}}@keyframes render-run{0%{translate:-100%}to{translate:270%}}@keyframes draw-stroke{0%{stroke-dashoffset:1px}}.status--start{text-align:start;justify-items:start}.status--start .status__emblem{justify-items:start}.status--start .status__halo{left:-52px}.status--start .status__body p{text-wrap:pretty}.status--start .status__actions{justify-content:flex-start}@media (max-width:560px){.status:has(.status__body>p+p){text-align:start;justify-items:start}.status:has(.status__body>p+p) .status__emblem{justify-items:start}.status:has(.status__body>p+p) .status__halo{left:-52px}.status__body:has(>p+p) p{text-wrap:pretty}.status__actions{flex-direction:column;align-items:stretch;width:100%}.status__actions .btn,.status__actions form{width:100%}}.status--quiet.status--start .status__emblem{justify-self:stretch}.status--quiet.status--start .status__meter{width:100%}.status--skel .status__emblem{margin-bottom:2px}.status--skel .status__title{width:100%}.status--skel .status__body{width:min(100%,26em)}.status--skel .skel-lines{align-items:center}@media (max-width:560px){.status--skel .status__actions .skel{width:100%}}
