/* Pay: one screen, two faces, and the daily work centre. A palette of its own, scoped to the screen: lime
   for money coming in (a fourth hue, so it never reads as the ok mark), red for what is owed, amber for
   effort (the owner's choice: it matches the rest of the app). Amber stays the one primary button. Everything moves once,
   on the first paint, and not at all under reduced motion. */
.pay-root{--money:#D4FF3A;--owed:#E5484D;--work:#F5B92E;--work-text:#F5B92E;display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
.pay-root>*{min-width:0}
.pay-root .ui-heading,.pay-root .ui-actions{flex-wrap:wrap}
.pay-root .ui-heading{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center}
.pay-root .ui-heading>div{min-width:0}
.pay-root .ui-heading .ui-actions{justify-content:flex-start}
/* ---- the person's page ---- */
.pay-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4);align-items:stretch}
.pay-hero>.ui-panel{display:grid;gap:var(--s-2);align-content:start;min-width:0;overflow:hidden}
.pay-hero[data-month]{grid-template-columns:repeat(3,minmax(0,1fr))}
.pay-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.pay-tiles>.ui-panel{display:grid;gap:var(--s-2);align-content:start;min-width:0;overflow:hidden}
.pay-money{justify-content:center;background:radial-gradient(120% 100% at 0% 0%,rgba(212,255,58,.08),transparent 60%),var(--bg-1)}
.pay-big{font-size:clamp(56px,9vw,96px);line-height:1;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap;color:var(--fg-1)}
.pay-big[data-money]{color:var(--money);text-shadow:0 0 32px rgba(212,255,58,.32)}
.pay-big[data-owed]{color:var(--owed);text-shadow:0 0 32px rgba(229,72,77,.38)}
.pay-owed-hero[data-zero] .pay-big{color:var(--fg-3);text-shadow:none}
.pay-big[data-still]{text-shadow:none}
.pay-big[data-pulse]{animation:pay-pulse 1.4s var(--ease-out) 1}
.pay-mid{font-size:var(--t-24);line-height:1.1;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.pay-mid[data-ok]{color:var(--money)}
.pay-mid[data-owed]{color:var(--owed)}
.pay-line{font-size:var(--t-13);color:var(--fg-2)}
[data-owed-text]{color:var(--owed)}
[data-money-text]{color:var(--money)}
[data-attention-text]{color:var(--attention)}
/* work today: the number white and big, the target in violet text, a hatched track with a violet fill */
.pay-work{gap:var(--s-3)}
.pay-work-n{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.pay-work-n b{font-size:40px;line-height:1;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg-1)}
.pay-work-n span{font-size:var(--t-16);color:var(--work-text);font-weight:var(--w-medium)}
.pay-track{position:relative;height:12px;border-radius:var(--r-pill);overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 4px,transparent 4px 9px),var(--bg-2)}
.pay-fill{position:relative;height:100%;width:var(--w);border-radius:inherit;background:var(--work);animation:pay-fill .9s var(--ease-out) 1;overflow:hidden}
.pay-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:pay-sweep 1.2s var(--ease-out) .6s 1}
.pay-track[data-tone="money"] .pay-fill{background:var(--money)}
.pay-kinds{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.pay-kinds .ui-chip[data-hit]{color:var(--money)}
.pay-next{display:inline-flex;align-items:center;gap:var(--s-1);justify-self:start;border:0;background:none;padding:0;color:var(--fg-1);font:var(--w-medium) var(--t-13)/1.3 var(--font);cursor:pointer}
.pay-next:hover{color:var(--work-text)}
.pay-next .ui-icon{width:14px;height:14px}
/* the effort strip: fourteen bars, today brighter, a faint tick at the target, four figures beneath */
.pay-effort{display:grid;gap:var(--s-3)}
.pay-bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:88px;align-items:end}
.pay-bar{position:relative;height:100%;display:flex;align-items:flex-end;min-width:0}
.pay-bar i{display:block;width:100%;height:max(var(--h),3px);border-radius:3px 3px 0 0;background:var(--work);opacity:.62;transform-origin:bottom;animation:pay-rise .6s var(--ease-out) calc(var(--i)*30ms) both}
.pay-bar[data-today] i{opacity:1;background:var(--work-text)}
.pay-bar[data-hit] i{opacity:.9}
.pay-bar u{position:absolute;left:0;right:0;bottom:var(--t);height:1px;background:rgba(255,255,255,.28);pointer-events:none}
.pay-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.pay-figure{display:grid;gap:2px;min-width:0}
.pay-figure b{font-size:var(--t-24);line-height:1.1;font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;color:var(--work-text)}
.pay-figure span{font-size:var(--t-12);color:var(--fg-2)}
.pay-milestones{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.pay-wallet{display:grid;gap:var(--s-2)}
.pay-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-13);word-break:break-all;color:var(--fg-1)}
.pay-addr[data-old]{color:var(--fg-3);text-decoration:line-through}
.pay-table{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.pay-table th{text-align:left;font-size:var(--t-11);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--w-medium);padding:6px 8px;border-bottom:1px solid var(--edge)}
.pay-table td{padding:8px;border-bottom:1px solid var(--edge);vertical-align:top}
.pay-table tr[data-new]{animation:pay-glow 1.6s ease-out 1}
.pay-table tr[data-flash]{animation:pay-flash 1.4s ease-out 1}
.pay-table .ui-num{font-variant-numeric:tabular-nums}
.pay-table td[data-ok]{color:var(--money);font-weight:var(--w-semibold)}
.pay-bonus{display:block;font-size:var(--t-12);color:var(--fg-2)}
.pay-today{display:grid;gap:4px;min-width:120px}
.pay-today .pay-track{height:8px}
.pay-empty{padding:var(--s-6);text-align:center;color:var(--fg-2)}
/* ---- the owner's page: owed right now, red, and the donut of who ---- */
.pay-owed{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4);align-items:stretch}
.pay-owed-hero{display:grid;gap:var(--s-2);align-content:center;min-width:0;overflow:hidden;background:radial-gradient(120% 100% at 0% 0%,rgba(229,72,77,.10),transparent 60%),var(--bg-1)}
.pay-owed-hero[data-zero]{background:var(--bg-1)}
.pay-owed-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:center;min-width:0}
.pay-donut{position:relative;width:220px;max-width:100%;aspect-ratio:1}
.pay-donut svg{display:block;width:100%;height:100%;overflow:visible}
.pay-seg{cursor:pointer;outline:none;transition:opacity var(--dur-2) var(--ease-out);animation:pay-arc 1s var(--ease-out) calc(var(--i)*90ms) both}
.pay-donut[data-focus] .pay-seg{opacity:.28}
.pay-donut[data-focus] .pay-seg:hover,.pay-donut[data-focus] .pay-seg:focus-visible{opacity:1}
.pay-seg:focus-visible{stroke-width:22}
.pay-donut-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px;pointer-events:none}
.pay-donut-name{font-size:var(--t-12);color:var(--fg-2);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-donut-amt{font-size:var(--t-24);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums;color:var(--owed);letter-spacing:-.02em}
.pay-donut[data-empty="1"] .pay-donut-amt{color:var(--fg-3)}
.pay-legend{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.pay-legend-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:var(--s-1) var(--s-2);align-items:center;width:100%;border:0;background:none;padding:4px 6px;border-radius:var(--r-xs);color:var(--fg-1);font:var(--t-13)/1.3 var(--font);text-align:left;cursor:pointer}
.pay-legend-item:hover{background:var(--bg-2)}
.pay-legend-item i{width:10px;height:10px;border-radius:50%}
.pay-legend-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-legend-item b{font-variant-numeric:tabular-nums;font-weight:var(--w-semibold)}
.pay-legend-item small{grid-column:2/-1;font-size:var(--t-11);color:var(--fg-3)}
.pay-now{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-3)}
.pay-card{display:grid;gap:var(--s-2);align-content:start}
.pay-card[data-pending]{box-shadow:var(--edge-light),inset 0 0 0 1px var(--attention)}
.pay-card[data-flash]{animation:pay-flash 1.4s ease-out 1}
.pay-card .ui-actions{flex-wrap:wrap}
.pay-strip{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--attention)}
.pay-strip .pay-addr{font-size:var(--t-12)}
.pay-diff b{color:var(--attention)}
/* motion: cards stagger in on the first paint, arcs draw in, the fill sweeps once, the hero pulses once when money landed */
[data-in="go"]{animation:pay-in .5s var(--ease-out) calc(var(--in,0)*40ms) both}
@keyframes pay-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pay-fill{from{width:0}}
@keyframes pay-sweep{to{transform:translateX(100%)}}
@keyframes pay-rise{from{transform:scaleY(0)}}
@keyframes pay-arc{from{stroke-dasharray:0 502.65}}
@keyframes pay-pulse{0%{transform:scale(.96);text-shadow:0 0 0 rgba(212,255,58,0)}40%{transform:scale(1.02);text-shadow:0 0 48px rgba(212,255,58,.55)}100%{transform:none}}
@keyframes pay-glow{0%{background:rgba(212,255,58,.16)}100%{background:transparent}}
@keyframes pay-flash{0%{box-shadow:var(--edge-light),0 0 0 2px var(--owed)}100%{box-shadow:var(--edge-light)}}
@media (prefers-reduced-motion:reduce){.pay-table tr[data-new]{animation:none;background:rgba(212,255,58,.10)}.pay-big,.pay-big[data-money],.pay-big[data-owed]{text-shadow:none;animation:none}.pay-fill,.pay-fill::after,.pay-bar i,.pay-seg,[data-in="go"],.pay-card[data-flash],.pay-table tr[data-flash]{animation:none}}
:root[data-motion="reduce"] .pay-fill,:root[data-motion="reduce"] .pay-fill::after,:root[data-motion="reduce"] .pay-bar i,:root[data-motion="reduce"] .pay-seg,:root[data-motion="reduce"] [data-in="go"],:root[data-motion="reduce"] .pay-big{animation:none;text-shadow:none}
@media (max-width:900px){.pay-hero,.pay-owed{grid-template-columns:minmax(0,1fr)}.pay-hero[data-month]{grid-template-columns:repeat(2,minmax(0,1fr))}.pay-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.pay-figures{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pay-big{font-size:clamp(44px,13vw,72px)}.pay-hero[data-month]{grid-template-columns:minmax(0,1fr)}.pay-tiles{grid-template-columns:minmax(0,1fr)}.pay-owed-who{grid-template-columns:minmax(0,1fr);justify-items:center}.pay-donut{width:200px}.pay-bars{height:64px;gap:2px}.pay-work-n b{font-size:32px}}