/* ============================================================
   finance.css — the Lumen skin for the Finance tab.

   Every selector is scoped to section[data-view="finance"], so this file
   cannot change any other surface in the app. It restyles the
   markup that is already there, including the panels check.js and
   zelle.js generate, rather than asking those modules to emit
   anything new.

   Motion vocabulary comes from :root in index.html and is not
   redefined here.
   ============================================================ */

section[data-view="finance"]{
  --fin-r:26px; --fin-r-in:18px; --fin-pad:1.6rem;
  --fin-expo:cubic-bezier(.16,1,.3,1);
  --fin-quint:cubic-bezier(.22,1,.36,1);
  --fin-tab:200ms; --fin-enter:460ms;
  position:relative;
}

/* One ambient light source across the top of the tab. */
section[data-view="finance"] .fin-glow{
  position:absolute; inset:-12% -8% auto; height:460px; pointer-events:none; z-index:0;
  background:radial-gradient(52% 88% at 20% 2%,rgba(0,200,235,.22) 0%,transparent 64%),
             radial-gradient(46% 74% at 82% 8%,rgba(104,80,255,.17) 0%,transparent 62%);
  filter:blur(20px);
}
section[data-view="finance"] > *:not(.fin-glow){ position:relative; z-index:1; }

/* ── surfaces ────────────────────────────────────────────────
   The generated panels use .card and .card-flat. Both are
   re-skinned here: borderless frosted glass, no nested borders. */
section[data-view="finance"] .card,
section[data-view="finance"] .fin-panel{
  border:0; border-radius:var(--fin-r);
  background:rgba(199,252,252,.058);
  box-shadow:0 28px 64px -30px rgba(0,2,30,.98), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(26px) saturate(148%);
  -webkit-backdrop-filter:blur(26px) saturate(148%);
}
section[data-view="finance"] .card::before,
section[data-view="finance"] .card::after{ content:none; }
section[data-view="finance"] .card-flat{
  border:0; border-radius:var(--fin-r-in);
  background:rgba(199,252,252,.042);
  transition:background-color var(--dur-fast) ease, transform var(--dur-press) var(--fin-quint);
}
section[data-view="finance"] .card-flat:active{ transform:scale(.995); }
@media (hover:hover) and (pointer:fine){
  section[data-view="finance"] .card-flat:hover{ background:rgba(199,252,252,.095); }
}

/* ── sub-tabs ────────────────────────────────────────────────
   zelle.js owns the switching and toggles .active on .tab-btn.
   This only changes how that looks, plus the sliding indicator
   finance-ui.js positions. Equal widths keep the indicator a
   fixed size, so it travels on transform alone. */
section[data-view="finance"] .fin-tabwrap{ margin-bottom:1rem; }
section[data-view="finance"] #financeSubTabs{
  display:flex; gap:.25rem; padding:.3rem; border-radius:999px; position:relative;
  background:rgba(0,2,30,.44); backdrop-filter:blur(20px);
  overflow-x:auto; scrollbar-width:none;
}
section[data-view="finance"] #financeSubTabs::-webkit-scrollbar{ display:none; }
section[data-view="finance"] .fin-ink{
  position:absolute; top:.3rem; bottom:.3rem; left:0; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,200,235,.32),rgba(0,200,235,.12));
  box-shadow:0 0 26px rgba(0,200,235,.3), inset 0 1px 0 rgba(255,255,255,.24);
  will-change:transform; transition:none;
}
section[data-view="finance"] #financeSubTabs[data-armed] .fin-ink{
  transition:transform var(--fin-tab) var(--fin-expo);
}
section[data-view="finance"] #financeSubTabs .tab-btn{
  position:relative; z-index:1; flex:1 1 0; min-width:96px; min-height:42px;
  padding:.62rem 1.2rem; border-radius:999px; border:0; background:none;
  color:rgba(199,252,252,.68); font-weight:700; font-size:.9rem; white-space:nowrap;
  transition:color var(--dur-fast) ease, transform var(--dur-press) var(--fin-quint);
}
section[data-view="finance"] #financeSubTabs .tab-btn:active{ transform:scale(.96); }
section[data-view="finance"] #financeSubTabs .tab-btn.active{ color:#fff; background:none; }

/* ── the four figures ───────────────────────────────────────── */
section[data-view="finance"] .fin-kpis{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin-bottom:1rem;
}
section[data-view="finance"] .fin-kpi{
  position:relative; overflow:hidden; border-radius:var(--fin-r);
  padding:1.2rem 1.3rem 1.05rem; display:flex; flex-direction:column; gap:.18rem;
  background:rgba(199,252,252,.058);
  box-shadow:0 28px 64px -30px rgba(0,2,30,.98), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter:blur(26px) saturate(148%);
  -webkit-backdrop-filter:blur(26px) saturate(148%);
}
section[data-view="finance"] .fin-k{ font-size:.8rem; font-weight:600; color:rgba(199,252,252,.7); }
section[data-view="finance"] .fin-v{
  font-family:'Rajdhani',sans-serif; font-size:2.45rem; font-weight:800; line-height:1.02;
  letter-spacing:-.035em; color:#F2FEFF; font-variant-numeric:tabular-nums;
  transform-origin:left center; clip-path:inset(-20% 0 -20% 0);
}
section[data-view="finance"] .fin-v.pos{ color:#7ff0a8; }
section[data-view="finance"] .fin-v.warn{ color:#ffcf66; }
section[data-view="finance"] .fin-d{ font-size:.83rem; color:rgba(199,252,252,.58); }
section[data-view="finance"] .fin-spark{ position:relative; margin-top:.6rem; height:30px; }
section[data-view="finance"] .fin-spark svg{ width:100%; height:30px; display:block; }
section[data-view="finance"] .fin-tip{
  position:absolute; width:12px; height:12px; overflow:visible; pointer-events:none; opacity:0;
}
section[data-view="finance"] .fin-tip .tip-halo{
  transform-box:fill-box; transform-origin:center;
  animation:finTipPulse 3.6s ease-out infinite;
}
@keyframes finTipPulse{
  0%{ transform:scale(.6); opacity:.55; } 70%,100%{ transform:scale(2.4); opacity:0; }
}
/* Each tile catches the light on its own schedule. Periods that do
   not divide into each other keep the four from ever syncing up,
   which is the difference between alive and timed. */
section[data-view="finance"] .fin-kpi::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:0; width:38%;
  pointer-events:none; border-radius:40%;
  background:linear-gradient(100deg,transparent,rgba(199,252,252,.13) 46%,transparent);
  transform:translate3d(-140%,0,0) rotate(8deg);
  animation:finSheen var(--fin-sheen,11s) linear infinite;
  animation-delay:var(--fin-sheen-in,0s);
}
@keyframes finSheen{
  0%,80%{ transform:translate3d(-140%,0,0) rotate(8deg); }
  100%{ transform:translate3d(340%,0,0) rotate(8deg); }
}
section[data-view="finance"] .fin-kpi:nth-child(1){ --fin-sheen:11s;   --fin-sheen-in:0s; }
section[data-view="finance"] .fin-kpi:nth-child(2){ --fin-sheen:14s;   --fin-sheen-in:2.3s; }
section[data-view="finance"] .fin-kpi:nth-child(3){ --fin-sheen:12.5s; --fin-sheen-in:5.1s; }
section[data-view="finance"] .fin-kpi:nth-child(4){ --fin-sheen:15s;   --fin-sheen-in:7.8s; }
/* A light that follows the cursor on a spring. Mouse only. */
section[data-view="finance"] .fin-lume{
  position:absolute; top:0; left:0; width:280px; height:280px; margin:-140px 0 0 -140px;
  border-radius:999px; pointer-events:none; opacity:0; will-change:transform;
  background:radial-gradient(circle,rgba(0,200,235,.2) 0%,rgba(0,200,235,.07) 42%,transparent 68%);
  transition:opacity 260ms ease;
}
section[data-view="finance"] .fin-kpi[data-lume] .fin-lume{ opacity:1; }

/* ── the season chart ───────────────────────────────────────── */
section[data-view="finance"] .fin-chartcard{ padding:var(--fin-pad); }
section[data-view="finance"] .fin-h{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem;
}
section[data-view="finance"] .fin-h h3{
  font-family:'Bitter',Georgia,serif; font-size:1.25rem; letter-spacing:-.02em; color:var(--btn-text);
}
section[data-view="finance"] .fin-sub{ font-size:.86rem; color:rgba(199,252,252,.6); }
section[data-view="finance"] .fin-h .fin-year{ margin-left:auto; font-size:.86rem; color:rgba(199,252,252,.6); }
section[data-view="finance"] #fin-chart svg{ width:100%; height:200px; display:block; overflow:visible; }
section[data-view="finance"] .fin-xaxis{
  display:grid; grid-template-columns:repeat(12,1fr); text-align:center;
  font-size:.74rem; color:rgba(142,225,223,.6); margin-top:.4rem;
}
section[data-view="finance"] .fin-xaxis b{ color:var(--text); }
section[data-view="finance"] .ch-now{ transform-box:fill-box; transform-origin:top center; }
section[data-view="finance"] .ch-dot{ transform-box:fill-box; transform-origin:center; }
section[data-view="finance"] .bar-fill,
section[data-view="finance"] .bar-seg{ transform-box:fill-box; transform-origin:left center; }
section[data-view="finance"] .fin-empty{
  padding:2.2rem 1rem; text-align:center; color:rgba(199,252,252,.6); font-size:.9rem;
}

/* ── invoice rows, generated by os-app.js ───────────────────── */
section[data-view="finance"] .os-invoice-row{
  border-bottom:0; border-radius:var(--fin-r-in); padding:.9rem 1.1rem; min-height:52px;
  background:rgba(199,252,252,.042); margin-bottom:.45rem;
  transition:background-color var(--dur-fast) ease, transform var(--dur-press) var(--fin-quint);
}
section[data-view="finance"] .os-invoice-row:active{ transform:scale(.995); }
@media (hover:hover) and (pointer:fine){
  section[data-view="finance"] .os-invoice-row:hover{ background:rgba(199,252,252,.095); }
}
section[data-view="finance"] .os-invoice-amt{
  font-family:'Rajdhani',sans-serif; font-size:1.18rem; font-weight:700;
  letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:#F2FEFF; text-align:right;
}
section[data-view="finance"] .os-invoice-client{ color:#F2FEFF; }
section[data-view="finance"] .os-invoice-empty{ padding:1.6rem 1.1rem; color:rgba(199,252,252,.6); }
section[data-view="finance"] #invoice-list{ padding:.4rem; }
/* The generated header row above the list keeps its own grid. */
section[data-view="finance"] .divide-y > * + *{ border-top:0; }

/* ── panels arriving ─────────────────────────────────────────
   The blur is not decoration: it bridges two overlapping states so
   a swap reads as one object moving rather than two crossfading. */
section[data-view="finance"] .fin-enter{
  animation:finPaneIn var(--fin-enter) var(--fin-expo) both;
}
@keyframes finPaneIn{
  from{ opacity:0; filter:blur(6px);
        transform:translate3d(calc(var(--fin-dir,1) * 34px),0,0); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
section[data-view="finance"] .fin-enter .card-flat,
section[data-view="finance"] .fin-enter .os-invoice-row{
  animation:finRowIn 460ms var(--fin-expo) both;
  animation-delay:calc(var(--fin-i,0) * 44ms);
}
@keyframes finRowIn{
  from{ opacity:0; transform:translate3d(0,10px,0); } to{ opacity:1; transform:none; }
}
section[data-view="finance"] .fin-enter .fin-v{
  animation:finRise 620ms var(--fin-expo) both;
}
@keyframes finRise{
  from{ clip-path:inset(100% 0 -20% 0); transform:translate3d(0,14px,0); }
  to{ clip-path:inset(-20% 0 -20% 0); transform:none; }
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:900px){
  section[data-view="finance"] .fin-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  section[data-view="finance"] .fin-kpis{ grid-template-columns:minmax(0,1fr); }
  section[data-view="finance"] .fin-chartcard{ padding:1.2rem; }
  section[data-view="finance"] #financeSubTabs .tab-btn{ min-width:84px; padding:.62rem .7rem; }
}

/* ── one calm for anyone who asks for it ────────────────────── */
@media (prefers-reduced-motion:reduce){
  section[data-view="finance"] .fin-kpi::after,
  section[data-view="finance"] .fin-tip .tip-halo{ animation:none; }
  section[data-view="finance"] .fin-lume{ display:none; }
  section[data-view="finance"] .fin-v{ clip-path:none; }
  section[data-view="finance"] #financeSubTabs[data-armed] .fin-ink{ transition:none; }
  section[data-view="finance"] .fin-enter,
  section[data-view="finance"] .fin-enter .card-flat,
  section[data-view="finance"] .fin-enter .os-invoice-row,
  section[data-view="finance"] .fin-enter .fin-v{ animation:finFade 140ms ease both; }
  @keyframes finFade{ from{ opacity:0; } to{ opacity:1; } }
  section[data-view="finance"] #financeSubTabs .tab-btn:active,
  section[data-view="finance"] .card-flat:active,
  section[data-view="finance"] .os-invoice-row:active{ transform:none; }
}

/* ============================================================
   INVOICE DETAIL SHEET
   Mounted on <body>, deliberately: a scrim inside the Finance
   section would be trapped by the panel's own stacking context
   and clipped by its overflow. That means it sits OUTSIDE
   section[data-view="finance"], so it cannot inherit the tokens
   above and restates the few it needs.
   ============================================================ */

.fin-sheet-wrap{
  --fin-r:26px; --fin-r-in:18px;
  --fin-expo:cubic-bezier(.16,1,.3,1);
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
}

.fin-sheet-scrim{
  position:absolute; inset:0;
  background:rgba(0,2,20,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity 200ms var(--fin-expo);
}
.fin-sheet-wrap.open .fin-sheet-scrim{ opacity:1; }

.fin-sheet{
  position:relative; z-index:1;
  width:min(30rem,100%); max-height:min(84vh,44rem); overflow-y:auto;
  padding:1.5rem;
  border-radius:var(--fin-r);
  border:1px solid rgba(140,200,255,.16);
  background:linear-gradient(168deg,rgba(16,26,64,.94) 0%,rgba(8,14,42,.96) 100%);
  backdrop-filter:blur(26px) saturate(148%);
  -webkit-backdrop-filter:blur(26px) saturate(148%);
  box-shadow:0 32px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(190,225,255,.11);
  color:var(--text);
  /* Travels on transform + opacity only, both composited. */
  opacity:0; transform:translateY(14px) scale(.975);
  transition:opacity 200ms var(--fin-expo),transform 260ms var(--fin-expo);
}
.fin-sheet-wrap.open .fin-sheet{ opacity:1; transform:none; }

.fin-sheet-x{
  position:absolute; top:1rem; right:1rem;
  width:2rem; height:2rem; line-height:1; font-size:1.35rem;
  display:grid; place-items:center;
  border-radius:999px; border:1px solid rgba(140,200,255,.16);
  background:rgba(255,255,255,.05); color:var(--text);
  cursor:pointer; transition:background 140ms var(--fin-expo);
}
.fin-sheet-x:hover{ background:rgba(255,255,255,.12); }

.fin-sheet-top{ padding-right:2.5rem; margin-bottom:1.15rem; }
.fin-sheet-client{
  font-family:'Bitter',Georgia,serif; font-size:1.3rem; line-height:1.25;
  color:var(--btn-text); overflow-wrap:anywhere;
}
.fin-sheet-amt{
  margin-top:.45rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:'Bitter',Georgia,serif; font-size:1.75rem;
}
.fin-sheet-ref{
  margin-top:.4rem; font-family:'Rajdhani',sans-serif;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55;
}

.fin-sheet-grid{
  display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.1rem;
  padding:1.05rem; border-radius:var(--fin-r-in);
  background:rgba(255,255,255,.035); border:1px solid rgba(140,200,255,.09);
}
.fin-sheet-k{
  font-family:'Rajdhani',sans-serif; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6; white-space:nowrap; padding-top:.12rem;
}
.fin-sheet-v{ font-size:.92rem; overflow-wrap:anywhere; }

.fin-sheet-sec{ margin-top:1.05rem; }
.fin-sheet-h{
  font-family:'Rajdhani',sans-serif; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.6; margin-bottom:.6rem;
}
.fin-sheet-tally{ display:flex; gap:.45rem; flex-wrap:wrap; }
.fin-sheet-ytd{ margin-top:.7rem; font-family:'Bitter',Georgia,serif; font-size:1.15rem; }
.fin-sheet-ytd span{ font-family:inherit; font-size:.8rem; opacity:.55; }

.fin-sheet-foot{ margin-top:1.35rem; }
.fin-sheet-go{ width:100%; justify-content:center; }
.fin-sheet-nolink{
  font-size:.8rem; opacity:.5; text-align:center; line-height:1.5;
}

/* The row is a control now, so it has to read like one. Hover, active and the
   transition are already on .os-invoice-row above — and the hover there is
   correctly behind @media (hover:hover), which stops it sticking after a tap
   on iOS. Only the affordance and the focus ring are missing. */
section[data-view="finance"] .os-invoice-row[data-fin-row]{ cursor:pointer; }
section[data-view="finance"] .os-invoice-row[data-fin-row]:focus-visible{
  outline:2px solid rgba(0,200,235,.65); outline-offset:-2px;
}

@media (prefers-reduced-motion:reduce){
  .fin-sheet,.fin-sheet-scrim{ transition:none; }
  .fin-sheet{ opacity:1; transform:none; }
}

/* ── the editable block inside the sheet ────────────────────── */
.fin-edit-l{
  display:block; margin:.85rem 0 .35rem;
  font-family:'Rajdhani',sans-serif; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.6;
}
.fin-edit-i{ width:100%; }
.fin-edit .fin-edit-save{ width:100%; justify-content:center; margin-top:1rem; }
.fin-edit .fin-edit-save:disabled{ opacity:.4; cursor:not-allowed; }
.fin-edit-msg{ min-height:1.15rem; margin-top:.5rem; font-size:.8rem; text-align:center; opacity:.75; }
.fin-edit-msg.good{ color:var(--success,#4ade80); opacity:1; }
.fin-edit-msg.bad{ color:var(--danger,#f87171); opacity:1; }
.fin-sheet-note{
  margin-top:1.05rem; padding:.75rem .9rem; border-radius:var(--fin-r-in);
  background:rgba(255,255,255,.03); border:1px solid rgba(140,200,255,.09);
  font-size:.82rem; opacity:.6; text-align:center;
}