/* ============================================================================
   assets/css/construction/petty-pro.css — Petty Cash visual polish (2026-09-11)
   ----------------------------------------------------------------------------
   Additive: restyles the classes Petty Cash already renders (hero, sub-tabs,
   fund cards, KPI tiles, side panels, ledger, add-line pills, signatures) and
   adds restrained motion — enter reveals, hover lift, press feedback, a
   spinning Refresh — all through the construction tokens so light and dark
   both hold. Nothing here changes what a control does.
   ========================================================================== */

/* ---- motion tokens + reveal ------------------------------------------- */
.pettyview{ --pp-ease:cubic-bezier(.22,.9,.24,1); --pp-spring:cubic-bezier(.34,1.4,.44,1); }
@keyframes ppUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes ppPop{ 0%{ transform:scale(.96); opacity:0; } 60%{ transform:scale(1.015); opacity:1; } 100%{ transform:none; } }
@keyframes ppSpin{ to{ transform:rotate(360deg); } }
@keyframes ppShine{ from{ transform:translateX(-140%) skewX(-18deg); } to{ transform:translateX(240%) skewX(-18deg); } }
@media (prefers-reduced-motion:no-preference){
  .pettyview .homehero{ animation:ppUp .5s var(--pp-ease) both; }
  .pettyview .psubtabs{ animation:ppUp .5s .05s var(--pp-ease) both; }
  .pettyview .pettycard{ animation:ppPop .45s var(--pp-spring) both; }
  .pettyview .pettycard:nth-child(2){ animation-delay:.06s } .pettyview .pettycard:nth-child(3){ animation-delay:.12s } .pettyview .pettycard:nth-child(4){ animation-delay:.18s }
  .pettyview .trkkpis > *{ animation:ppUp .45s var(--pp-ease) both; }
  .pettyview .trkkpis > *:nth-child(2){ animation-delay:.05s } .pettyview .trkkpis > *:nth-child(3){ animation-delay:.1s } .pettyview .trkkpis > *:nth-child(4){ animation-delay:.15s }
  .pettyview .pfside{ animation:ppUp .5s .1s var(--pp-ease) both; }
  .pettyview .pltblwrap, .pettyview .pltbl{ animation:ppUp .5s .12s var(--pp-ease) both; }
}

/* ---- hero -------------------------------------------------------------- */
.pettyview .homehero.oshero{ position:relative; padding:22px 10px 16px; }
.pettyview .homehero.oshero::before{
  content:""; position:absolute; inset:-10px 0 auto; height:180px; pointer-events:none; z-index:0;
  background:radial-gradient(60% 100% at 50% 0%, rgba(163,178,94,.18), transparent 70%);
}
.pettyview .homehero .logobig.osll{
  position:relative; z-index:1; width:60px; height:60px; border-radius:18px;
  background:linear-gradient(145deg, var(--olive,#A3B25E), var(--olive-d,#6f7d33)); color:#fff;
  box-shadow:0 14px 30px -10px rgba(111,125,51,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.pettyview .homehero h2{ position:relative; z-index:1; letter-spacing:-.02em; font-size:24px; }
.pettyview .homehero .hsub{ position:relative; z-index:1; letter-spacing:.14em; font-weight:800; color:var(--olive-d,#6f7d33); }

/* ---- sub-tabs: one segmented control ----------------------------------- */
.pettyview .psubtabs{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px; margin:10px 0 6px;
  background:var(--paper3,rgba(0,0,0,.04)); border:1px solid var(--line);
}
.pettyview .pstab{
  border:0; background:transparent; color:var(--muted); font:800 12.5px/1 inherit; padding:9px 16px; border-radius:999px; cursor:pointer;
  transition:background-color .18s var(--pp-ease), color .18s, transform .18s var(--pp-spring), box-shadow .18s;
}
.pettyview .pstab:hover{ color:var(--ink); }
.pettyview .pstab.on{
  background:linear-gradient(135deg, var(--olive,#A3B25E), var(--olive-d,#6f7d33)); color:#fff;
  box-shadow:0 6px 16px -6px rgba(111,125,51,.6);
}
.pettyview .pstab:active{ transform:scale(.96); }

/* ---- fund cards -------------------------------------------------------- */
.pettyview .pettypick{ gap:14px; }
.pettyview .pettycard{
  position:relative; overflow:hidden; border-radius:16px; padding:16px 17px 14px;
  border:1px solid var(--line); background:var(--paper2); box-shadow:var(--shadow);
  transition:transform .22s var(--pp-spring), box-shadow .26s var(--pp-ease), border-color .2s;
}
.pettyview .pettycard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--olive,#A3B25E), var(--olive-d,#6f7d33));
}
.pettyview .pettycard:not(.pcaddfund):hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(20,24,16,.35); border-color:var(--olive,#A3B25E); }
.pettyview .pettycard:active{ transform:translateY(-1px) scale(.995); }
.pettyview .pettycard .pcname{ font-size:15.5px; }
.pettyview .pettycard .pcrow{ padding:4px 0; border-bottom:1px dashed var(--line); }
.pettyview .pettycard .pcrow:last-of-type{ border-bottom:0; }
.pettyview .pettycard .pcv{ font-size:12.5px; }
.pettyview .pettycard .pcgo{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:6px 11px; border-radius:999px; background:rgba(163,178,94,.14); color:var(--olive-d,#6f7d33); transition:gap .18s var(--pp-ease), background-color .18s; }
.pettyview .pettycard:hover .pcgo{ gap:10px; background:rgba(163,178,94,.24); }
.pettyview .pettycard.pcaddfund::before{ display:none; }
.pettyview .pettycard.pcaddfund{ transition:border-color .2s, background-color .2s; }
.pettyview .pettycard.pcaddfund:hover{ background:rgba(163,178,94,.08); }

/* ---- KPI tiles --------------------------------------------------------- */
.pettyview .trkkpis > *{
  position:relative; overflow:hidden; border-radius:14px; padding:14px 16px 13px 18px;
  border:1px solid var(--line); background:var(--paper2); box-shadow:var(--shadow);
  transition:transform .2s var(--pp-spring), box-shadow .24s var(--pp-ease);
}
.pettyview .trkkpis > *::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line2,#d5d3c4); }
.pettyview .trkkpis > .gpos::before, .pettyview .trkkpis > :has(.gpos)::before{ background:var(--ok,#3f7d4e); }
.pettyview .trkkpis > .gneg::before, .pettyview .trkkpis > :has(.gneg)::before{ background:var(--bad,#d6453f); }
@media (hover:hover){ .pettyview .trkkpis > *:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(20,24,16,.3); } }

/* ---- side panels (QR, chart) ------------------------------------------ */
.pettyview .pfside{ border-radius:18px; padding:15px; box-shadow:var(--shadow); transition:box-shadow .24s var(--pp-ease); }
.pettyview .pfside:hover{ box-shadow:0 18px 34px -16px rgba(20,24,16,.3); }
.pettyview .pfsttl{ display:flex; align-items:center; font-size:13.5px; letter-spacing:-.01em; }
.pettyview .pfqrwrap .pqrbig{ border-radius:14px; box-shadow:0 10px 24px -12px rgba(20,24,16,.35); transition:transform .25s var(--pp-spring); }
.pettyview .pfqrwrap .pqrbig:hover{ transform:scale(1.02); }
.pettyview .pfbtrack i{ transition:width .6s var(--pp-ease); }
.pettyview .pfbar:not(.ro):hover{ background:rgba(163,178,94,.08); }

/* ---- week picker + refresh -------------------------------------------- */
.pettyview .plwksel{ border-radius:12px; padding:9px 12px; box-shadow:var(--shadow); transition:border-color .18s, box-shadow .18s; }
.pettyview .plwksel:focus{ outline:none; border-color:var(--olive,#A3B25E); box-shadow:0 0 0 3px rgba(163,178,94,.25); }
.pettyview .hpbtn{ transition:transform .16s var(--pp-spring), box-shadow .2s, background-color .18s, border-color .18s, color .18s; }
.pettyview .hpbtn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(20,24,16,.35); }
.pettyview .hpbtn:active{ transform:scale(.96); }
.pettyview .hpbtn.prefresh:active{ animation:none; }
@media (prefers-reduced-motion:no-preference){ .pettyview .hpbtn.prefresh:hover{ animation:none; } .pettyview .hpbtn.prefresh:focus-visible, .pettyview .hpbtn.prefresh.busy{ animation:ppSpin .9s linear infinite; } }
.pettyview .hpbtn.fill{ position:relative; overflow:hidden; }
.pettyview .hpbtn.fill::after{ content:""; position:absolute; top:0; bottom:0; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform:translateX(-140%) skewX(-18deg); pointer-events:none; }
@media (prefers-reduced-motion:no-preference){ .pettyview .hpbtn.fill:hover::after{ animation:ppShine .8s var(--pp-ease); } }

/* ---- ledger ------------------------------------------------------------ */
.pettyview .pltblwrap{ border:1px solid var(--line); border-radius:14px; background:var(--paper2); box-shadow:var(--shadow); overflow:hidden; }
.pettyview .pltbl th{ letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--paper3,rgba(0,0,0,.03)); border-bottom:1px solid var(--line2,var(--line)); padding:8px 6px; }
.pettyview .pltbl td{ padding:6px 5px; border-bottom:1px solid var(--line); transition:background-color .16s; }
.pettyview .pltbl tbody tr:nth-child(even) td{ background:rgba(20,24,16,.018); }
.pettyview .pltbl tbody tr:hover td{ background:rgba(163,178,94,.1); }
.pettyview .pltbl tr.pltotrow td{ background:rgba(163,178,94,.14); border-top:2px solid var(--olive,#A3B25E); font-size:12px; }
.pettyview .pltbl tr.plsubt td{ background:rgba(163,178,94,.06); font-weight:700; color:var(--olive-d,#6f7d33); }
.pettyview .plin{ border-radius:8px; transition:border-color .16s, box-shadow .16s, background-color .16s; }
.pettyview .plin:focus{ outline:none; border-color:var(--olive,#A3B25E); box-shadow:0 0 0 3px rgba(163,178,94,.22); background:var(--paper2); }
.pettyview .plempty{ padding:26px 8px !important; color:var(--muted); }
.pettyview .plempty::before{ content:"＋"; display:block; width:44px; height:44px; line-height:44px; margin:0 auto 8px; border-radius:50%; background:rgba(163,178,94,.16); color:var(--olive-d,#6f7d33); font-size:22px; font-weight:800; }

/* ---- add-line pills ---------------------------------------------------- */
.pettyview .pladd{ padding:10px 12px; border-radius:14px; background:var(--paper3,rgba(0,0,0,.03)); border:1px dashed var(--line2,var(--line)); }
.pettyview .pladd .pladdbtn{ border-radius:999px; border:1px solid var(--line2,var(--line)); background:var(--paper2); font-weight:800; }
.pettyview .pladd .pladdbtn:hover{ border-color:var(--olive,#A3B25E); background:rgba(163,178,94,.14); color:var(--olive-d,#6f7d33); }

/* ---- signatures -------------------------------------------------------- */
.pettyview .plft{ border-top:1px solid var(--line); gap:32px; padding-top:14px; }
.pettyview .plsig{ min-width:160px; }
.pettyview .plsig b{ padding-bottom:6px; border-bottom:1.5px solid var(--ink); display:inline-block; min-width:150px; }
.pettyview .plsl{ letter-spacing:.09em; }

/* ---- focus rings ------------------------------------------------------- */
.pettyview .pstab:focus-visible, .pettyview .pettycard:focus-visible, .pettyview .hpbtn:focus-visible, .pettyview .pladdbtn:focus-visible{ outline:2px solid var(--olive,#A3B25E); outline-offset:2px; }

/* ---- print: none of the motion, none of the chrome --------------------- */
@media print{ .pettyview *{ animation:none !important; transition:none !important; box-shadow:none !important; } }