/* pOS enhancement layer: motion, depth and polish on top of the base styles in index.html.
   Everything here is cosmetic. It honours "Lite mode" (.lite) and prefers-reduced-motion. */

/* ---- 1. Spotlight: a soft highlight that follows the pointer across glass cards ---- */
.row,.card,.tl,.hero,.chart,.tl2,.mm,.pad2,.kpi{position:relative}
.row::after,.card::after,.tl::after,.hero::after,.chart::after,.tl2::after,.kpi::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.17),transparent 62%);
  transition:opacity .3s}
@media(hover:hover){
  .row:hover::after,.card:hover::after,.tl:hover::after,.hero:hover::after,.chart:hover::after,.tl2:hover::after,.kpi:hover::after{opacity:1}
  button.row,.row[data-a]{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
  button.row:hover,.row[data-a]:hover{transform:translateY(-2px)}
  button.row:active,.row[data-a]:active{transform:scale(.985)}
}

/* ---- 2. Staggered entrance for everything inside lists and columns ---- */
#main.enter .wrap>.cols,#main.enter .wrap>.gl{animation:none}
#main.enter .gl>*,#main.enter .cols>div>*,#main.enter .tls>*{
  animation:rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*42ms + 120ms)}

/* ---- 3. Sliding pill behind the active tab in the dock ---- */
.dock .dk-i{position:absolute;z-index:0;top:8px;bottom:8px;left:0;width:0;border-radius:99px;background:var(--ab);
  box-shadow:0 6px 16px -6px var(--sh);pointer-events:none;opacity:0;
  transition:transform .5s cubic-bezier(.3,1.25,.4,1),width .5s cubic-bezier(.3,1.25,.4,1),opacity .25s}
.dock.has-i button{z-index:1}
.dock.has-i button.on{background:transparent;box-shadow:none}
.dock .fab{z-index:2}

/* ---- 4. Header condenses and lifts as you scroll ---- */
.top{transition:box-shadow .35s,padding .35s,top .35s}
.top.sc{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--edge),0 18px 40px -10px var(--sh)}
[data-shell=phone] .top.sc{padding-top:6px;padding-bottom:6px}

/* ---- 5. Depth: page recedes while a sheet is open ---- */
main{transition:transform .5s cubic-bezier(.22,1.15,.36,1),filter .4s;transform-origin:50% 0}
body.sheet-open main{transform:scale(.965);filter:brightness(.8) saturate(1.1)}
[data-shell=tablet] body.sheet-open main,[data-shell=desktop] body.sheet-open main{transform:scale(.985)}

/* ---- 6. Button ripple ---- */
.bt,.dock button,.seg button,.ib{position:relative;overflow:hidden}
.dock .fab{overflow:visible}
.rpl{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:rpl .6s ease-out forwards}
@keyframes rpl{to{transform:scale(1);opacity:0}}

/* ---- 7. Confetti canvas and the undo snackbar ---- */
#cf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
#undo{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:61;transform:translate(-50%,24px) scale(.96);
  opacity:0;pointer-events:none;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 18px;border-radius:99px;max-width:94%;
  background:var(--ab);color:var(--at);font-weight:600;font-size:14px;box-shadow:0 14px 34px -8px var(--sh);
  transition:transform .45s cubic-bezier(.22,1.3,.36,1),opacity .25s}
#undo.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
#undo button{min-height:36px;padding:0 14px;border-radius:99px;font-weight:700;font-size:13px;color:inherit;background:rgba(128,120,200,.22);overflow:hidden;position:relative}
#undo button.pr{background:linear-gradient(135deg,hsl(var(--h) 95% 62%),hsl(calc(var(--h) + 45) 95% 60%));color:#fff}
#undo i{position:absolute;left:0;bottom:0;height:3px;background:currentColor;opacity:.35;width:100%;transform-origin:left;border-radius:3px}
#undo.on i{animation:ucount var(--ut,8s) linear forwards}
@keyframes ucount{to{transform:scaleX(0)}}

/* ---- 8. Ring gauge (collection health) ---- */
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .rt{stroke:rgba(128,120,200,.25)}
.ring .rv{stroke:url(#rg);stroke-dasharray:var(--c,276);stroke-dashoffset:var(--c,276);filter:drop-shadow(0 0 6px rgba(255,170,120,.55));
  transition:stroke-dashoffset 1.3s cubic-bezier(.22,1.2,.36,1) .2s}
.ring.go .rv{stroke-dashoffset:calc(var(--c,276)*(1 - var(--p,0)/100))}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ring b small{font-size:12px;font-weight:700;opacity:.7;margin-left:1px;align-self:center}
.ring.sm{width:56px;height:56px}.ring.sm circle{stroke-width:10}.ring.sm b{font-size:14px}.ring.sm b small{font-size:9px}

/* ---- 9. Agenda, KPI chips, filters and the new feature screens ---- */
.ag{padding:16px;margin-bottom:12px}
.ag h2{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ag .it{display:flex;align-items:center;gap:12px;width:100%;padding:11px 0;border-top:1px solid var(--edge);text-align:left}
.ag .it:first-of-type{border-top:0}
.ag .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ac);box-shadow:0 0 0 4px rgba(150,130,255,.18)}
.ag .dot.bad{background:var(--bad);box-shadow:0 0 0 4px rgba(255,90,120,.2)}
.ag .dot.w{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,60,.2)}
.ag .dot.ok{background:var(--ok);box-shadow:0 0 0 4px rgba(40,200,150,.2)}
.ag .dot.p{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,90,120,0)}}
.ag .tx{flex:1;min-width:0}.ag .tx b{display:block}
.fil{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fil::-webkit-scrollbar{display:none}
.fil button{flex:none;min-height:36px;padding:0 14px;border-radius:99px;font-weight:600;font-size:13px;background:rgba(128,120,200,.16);box-shadow:inset 0 0 0 1px var(--edge);color:var(--mu)}
.fil button.on{background:var(--ab);color:var(--at)}
.srch{display:flex;align-items:center;gap:10px;padding:0 16px;min-height:46px;border-radius:99px;margin-bottom:10px}
.srch input{flex:1;min-width:0;background:none;border:0;color:inherit;font:inherit;font-size:16px;outline:none}
.srch:focus-within{box-shadow:0 0 0 2px var(--ac)}
.bars2{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:10px}
.bars2 div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.bars2 i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:linear-gradient(#ffd08a,#ff6f91);min-height:3px;transform-origin:bottom;animation:gr .8s cubic-bezier(.22,1.2,.36,1) both}
.bars2 i.g2{background:linear-gradient(#7ef0c6,#19b87f)}
.bars2 span{font-size:11px;color:var(--mu)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th{text-align:left;font-weight:600;color:var(--mu);padding:6px 4px;border-bottom:1px solid var(--edge)}
.tbl td{padding:8px 4px;border-bottom:1px solid var(--edge)}
.tbl td:last-child,.tbl th:last-child{text-align:right}
.tbl tr.tot td{font-weight:800;border-bottom:0}
.chipsel{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.chipsel button{min-height:36px;padding:0 14px;border-radius:99px;font-size:13px;font-weight:600;background:rgba(128,120,200,.16);box-shadow:inset 0 0 0 1px var(--edge)}
.chipsel button.on{background:var(--ab);color:var(--at)}
.neg{color:var(--bad)}.pos{color:var(--ok)}
.strike{text-decoration:line-through;opacity:.55}
.note{padding:12px 14px;border-radius:18px;background:rgba(128,120,200,.12);box-shadow:inset 0 0 0 1px var(--edge);font-size:13px;color:var(--mu)}
.nt{padding:14px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(255,193,94,.18),rgba(255,111,145,.12));box-shadow:inset 0 0 0 1px rgba(255,193,94,.3);margin-bottom:10px}
.nt b{display:block;margin-bottom:2px}

/* ---- 10. HRA rent-receipt pack: printed as a clean paper document ---- */
.hra .rcp{margin:10px 0}
@media print{
  .hra,.hra *{color:#000!important}
  .hra .rcp{break-inside:avoid;background:#fff!important;box-shadow:none!important;border:1px solid #999;border-radius:6px}
  .tbl th,.tbl td{border-color:#bbb!important}
}

/* ---- 11. Misc polish ---- */
[data-shell=phone] #lb{right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);width:38px;height:38px;opacity:.7}
.kbd{display:inline-block;min-width:24px;padding:2px 7px;border-radius:7px;font:600 12px ui-monospace,monospace;text-align:center;background:rgba(128,120,200,.2);box-shadow:inset 0 0 0 1px var(--edge)}
@media(prefers-reduced-motion:reduce){.rpl,#cf{display:none}}
.lite .rpl,.lite #cf,.lite .dk-i{display:none}
body.lite.sheet-open main{transform:none;filter:none}

/* ---- 12. Direction-aware page transitions: forward slides left, back slides right ---- */
html[data-dir=f]::view-transition-new(pg){animation:slF .42s cubic-bezier(.22,1.1,.36,1) both}
html[data-dir=f]::view-transition-old(pg){animation:slFo .22s both}
html[data-dir=b]::view-transition-new(pg){animation:slB .42s cubic-bezier(.22,1.1,.36,1) both}
html[data-dir=b]::view-transition-old(pg){animation:slBo .22s both}
@keyframes slF{from{opacity:0;transform:translateX(34px)}}
@keyframes slFo{to{opacity:0;transform:translateX(-34px)}}
@keyframes slB{from{opacity:0;transform:translateX(-34px)}}
@keyframes slBo{to{opacity:0;transform:translateX(34px)}}

.gl.nofx>*{animation:none!important}

/* ---- 13. Phone layout nits: rows with an action button wrap it onto its own line ---- */
[data-shell=phone] .g.row:has(>.bt.sm){flex-wrap:wrap}
[data-shell=phone] .g.row:has(>.bt.sm)>.gr1{flex:1 1 0;min-width:0}
[data-shell=phone] .g.row:has(>.bt.sm)>.bt.sm{flex:1 0 100%;margin-left:0}