/* FINANCE -- the transactions view (assets/js/finance-txns.js). Finance's own language: its tokens (.fin),
   its cards, its glass panel; Geist with tabular figures. A full-screen layer over the dashboard with a sticky
   search and filter bar, the days as headed cards, one row per transaction. Linked with ?v=BUILD, cached a year. */

/* The dashboard card: the five newest */
.fin .fin-w-tx .ftx-row{margin:0 -8px;width:calc(100% + 16px)}
.fin-tx-all{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(214,175,60,.1);color:var(--fin-gold);font:600 12px/20px 'Geist',sans-serif;box-shadow:inset 0 0 0 1px rgba(214,175,60,.22)}
.fv-body .fin-tx-all{width:auto;max-width:none}
.fin-tx-all svg{width:12px;height:12px}
.fin-tx-all:active{transform:scale(.97)}
.fin-detail-tx h3{display:flex;justify-content:space-between;align-items:center}
.fin-detail-tx h3 .fin-tx-all{padding:2px 10px}

/* The layer */
.ftx{position:fixed;inset:0;z-index:42;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:radial-gradient(1200px 760px at -10% -10%,rgba(28,98,104,.42),transparent 62%),
    radial-gradient(900px 620px at 110% 0%,rgba(210,172,58,.13),transparent 60%),
    linear-gradient(180deg,#0B171B 0%,#0A1015 50%,#0A0B10 100%);
  background-attachment:fixed;animation:ftx-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes ftx-in{from{opacity:0;transform:translateX(28px)}}
.ftx.ftx-calm{animation:none}
.ftx-in-wrap{max-width:760px;margin:0 auto;padding:max(14px,calc(env(safe-area-inset-top) + 6px)) 16px max(28px,env(safe-area-inset-bottom))}

.ftx-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px}
.ftx .ftx-back{justify-self:start;display:inline-flex;align-items:center;gap:2px;width:auto;max-width:none;margin-left:-8px;padding:8px 10px 8px 4px;
  border:0;border-radius:12px;background:transparent;color:var(--fin-gold);font:500 15px/20px 'Geist',sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.ftx-back svg{width:20px;height:20px}
.ftx-back:active{opacity:.6}
.ftx-title{margin:0;font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.015em;color:var(--fin-ink)}

/* Search and filters: stay in reach while the list scrolls */
.ftx-tools{position:sticky;top:0;z-index:2;margin:4px -16px 0;padding:8px 16px 10px;
  background:linear-gradient(180deg,rgba(10,16,20,.94) 70%,rgba(10,16,20,.72));
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.ftx-search{position:relative;display:flex;align-items:center;height:44px;border-radius:14px;background:var(--fin-well);
  box-shadow:inset 0 0 0 1px var(--fin-stroke);transition:box-shadow .2s}
.ftx-search:focus-within{box-shadow:inset 0 0 0 1px rgba(214,175,60,.55),0 0 0 3px rgba(214,175,60,.12)}
.ftx-search > svg{position:absolute;left:14px;width:16px;height:16px;color:var(--fin-muted);pointer-events:none}
.ftx-search input{flex:1;min-width:0;height:100%;margin:0;padding:0 40px 0 40px;border:0;outline:0;background:transparent;
  color:var(--fin-ink);font:400 16px/20px 'Geist',sans-serif;-webkit-appearance:none;appearance:none}   /* 16px: no zoom on iOS */
.ftx-search input::placeholder{color:var(--fin-faint)}
.ftx-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.ftx .ftx-clear-q{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;max-width:none;
  padding:0;border:0;border-radius:10px;background:transparent;color:var(--fin-muted);cursor:pointer}
.ftx-clear-q svg{width:16px;height:16px}
.ftx-chips{display:flex;gap:8px;margin:10px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scroll-padding:0 16px}
.ftx-chips::-webkit-scrollbar{display:none}
.ftx .ftx-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;width:auto;max-width:220px;height:34px;padding:0 10px 0 14px;
  border:0;border-radius:999px;background:var(--fin-raised);color:var(--fin-body);font:500 13px/16px 'Geist',sans-serif;cursor:pointer;
  box-shadow:0 1px 0 var(--fin-hi) inset,0 0 0 1px var(--fin-stroke) inset;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background .18s,color .18s,transform .12s}
.ftx-chip > span{overflow:hidden;text-overflow:ellipsis}
.ftx-chip:active{transform:scale(.97)}
.ftx .ftx-chip.ftx-on{background:rgba(214,175,60,.16);color:#F2D57E;box-shadow:inset 0 0 0 1px rgba(214,175,60,.45)}
.ftx-caret{flex:0 0 auto;width:14px;height:14px;opacity:.7}
.ftx-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--fin-gold);color:#141414;font:700 11px/18px 'Geist',sans-serif;text-align:center}
.ftx .ftx-chip-clear{padding:0 14px;background:transparent;color:var(--fin-muted);box-shadow:none;text-decoration:underline;text-underline-offset:3px}

.ftx-banner{margin:12px 0 0;padding:8px 14px;border-radius:12px;font-size:13px;line-height:20px;color:var(--fin-gold);
  background:linear-gradient(180deg,rgba(214,175,60,.11),rgba(214,175,60,.05));box-shadow:inset 0 0 0 1px rgba(214,175,60,.24)}

/* The filtered totals */
.ftx-sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:14px 2px 4px;min-height:20px;
  font-size:13px;line-height:20px;color:var(--fin-muted)}
.ftx-n{color:var(--fin-body);font-weight:500}
.ftx-figs{display:flex;gap:16px}
.ftx-figs b{color:var(--fin-ink);font-weight:600}
.ftx-figs b.ftx-in{color:var(--fin-gain)}

/* The days */
.ftx-day{margin-top:16px}
.ftx-dayh{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:0 0 8px;padding:4px 2px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--fin-muted)}
.ftx-daynet{font-weight:500;color:var(--fin-faint)}
.ftx-daynet.ftx-in{color:var(--fin-gain)}
.ftx-card{padding:4px 8px;border-radius:18px;background:var(--fin-card);box-shadow:var(--fin-shadow)}

/* One transaction */
.fin .ftx-row{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;max-width:none;margin:0;padding:10px 8px;border:0;border-radius:12px;background:transparent;color:var(--fin-ink);
  font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
.fin .ftx-row + .ftx-row::before{content:'';position:absolute;left:52px;right:8px;top:0;height:1px;background:var(--fin-stroke)}
@media (hover:hover){.fin .ftx-row:hover{background:var(--fin-raised)} .fin .ftx-row:hover::before,.fin .ftx-row:hover + .ftx-row::before{opacity:0}}
.fin .ftx-row:active{background:var(--fin-raised);transform:none}
.ftx-ic{width:32px;height:32px;border-radius:10px}
.ftx-ic svg{width:16px;height:16px}
.ftx-ic-big{width:40px;height:40px;border-radius:12px}
.ftx-ic-big svg{width:20px;height:20px}
.ftx-mid{min-width:0}
.ftx-nm{display:block;font-size:15px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftx-sub{display:block;margin-top:1px;font-size:12px;line-height:16px;color:var(--fin-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftx-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ftx-amt{font-size:15px;line-height:20px;font-weight:600;color:var(--fin-ink);white-space:nowrap}
.ftx-amt.ftx-in{color:var(--fin-gain)}
.ftx-pend .ftx-amt{color:var(--fin-muted);font-weight:500}
.ftx-pend .ftx-nm{color:var(--fin-body)}
.ftx-tag{display:inline-block;padding:0 7px;border-radius:999px;font-size:11px;line-height:16px;font-weight:600;color:var(--fin-warn);background:rgba(244,166,59,.14)}
.ftx-row-c .ftx-nm{font-size:14px}
.ftx-row-c .ftx-amt{font-size:14px}

/* Loading: quiet bones, not a spinner */
.ftx-row-skel{cursor:default}
.ftx-bone{display:block;height:12px;width:60%;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));
  background-size:200% 100%;animation:ftx-shine 1.4s linear infinite}
.ftx-bone-s{width:36%;height:10px;margin-top:6px}
.ftx-bone-ic{width:32px;height:32px;border-radius:10px}
.ftx-bone-h{width:110px;height:10px}
.ftx-skel .ftx-card,.ftx-skel{border-radius:18px}
@keyframes ftx-shine{to{background-position:-200% 0}}

/* Nothing to show */
.ftx-empty{display:flex;flex-direction:column;align-items:center;padding:56px 24px;text-align:center}
.ftx-empty-ic{width:36px;height:36px;padding:10px;border-radius:14px;color:var(--fin-muted);background:var(--fin-raised);box-sizing:content-box}
.ftx-empty-h{margin:16px 0 0;font-size:16px;line-height:24px;font-weight:600;color:var(--fin-ink)}
.ftx-empty-s{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--fin-muted)}
.fin .ftx-reset{width:auto;max-width:none;margin-top:16px;padding:10px 16px;border:0;border-radius:12px;background:var(--fin-raised);color:var(--fin-ink);
  font:600 14px/20px 'Geist',sans-serif;cursor:pointer;box-shadow:var(--fin-shadow)}
.fin .ftx-reset:active{transform:scale(.98)}
.ftx-note{margin-top:28px}

/* A filter's sheet and a transaction's panel: Finance's glass panel, above the layer */
.fin .ftx-sheet,.fin .ftx-detail{z-index:43}
.ftx-sheet-card{padding-top:20px}
.ftx-sheet-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px}
.ftx-sheet-h{margin:0;font-size:17px;line-height:24px;font-weight:600;color:var(--fin-ink)}
.ftx .fin-detail-x{width:auto;max-width:none;border:0;cursor:pointer}
.ftx-opts{display:flex;flex-direction:column}
.fin .ftx-opt{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:none;min-height:52px;margin:0;padding:8px 4px;border:0;border-radius:0;box-shadow:none;
  background:transparent;color:var(--fin-ink);font:500 15px/20px 'Geist',sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fin .ftx-opt + .ftx-opt{border-top:1px solid var(--fin-stroke)}
.ftx-opt .ftx-ic{flex:0 0 auto}
.ftx-opt-logo{flex:0 0 auto;width:32px;height:32px;border-radius:10px;font-size:11px}
.ftx-opt-txt{flex:1;min-width:0}
.ftx-opt-l{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftx-opt-s{display:block;font-size:12px;line-height:16px;color:var(--fin-faint)}
.ftx-opt-n{font-size:13px;color:var(--fin-faint)}
.ftx-check{flex:0 0 auto;width:22px;height:22px;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);transition:background .15s,box-shadow .15s}
.ftx-radio{border-radius:50%}
.ftx-picked .ftx-check{background:var(--fin-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:none}
.ftx-sheet-clear{display:block;margin:12px auto 0}

/* One transaction's panel */
.ftx-damt{margin-top:20px}
.ftx-damt.ftx-in{color:var(--fin-gain)}
.ftx-detail .fin-detail-kind{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ftx-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:24px 0 0;padding:4px 16px;border-radius:16px;background:var(--fin-well);
  box-shadow:inset 0 0 0 1px var(--fin-stroke)}
.ftx-facts dt,.ftx-facts dd{margin:0;padding:12px 0;font-size:14px;line-height:20px}
.ftx-facts dt{color:var(--fin-muted)}
.ftx-facts dd{padding-left:16px;color:var(--fin-ink);text-align:right;overflow-wrap:anywhere}
.ftx-facts dt:not(:first-of-type),.ftx-facts dt:not(:first-of-type) + dd{border-top:1px solid var(--fin-stroke)}
.ftx-all-from{display:block;width:100%!important;margin-top:16px}

.fin .ftx-row:focus-visible,.ftx .ftx-chip:focus-visible,.ftx .ftx-back:focus-visible,.fin .ftx-opt:focus-visible,.fin .ftx-reset:focus-visible,
.fin-tx-all:focus-visible,.ftx .ftx-clear-q:focus-visible{outline:2px solid var(--fin-gold);outline-offset:2px}

@media (min-width:720px){
  .ftx-in-wrap{padding-left:24px;padding-right:24px}
  .ftx-tools{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
  .ftx-chips{margin-left:0;margin-right:0;padding:0;flex-wrap:wrap;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  .ftx{animation:none}
  .ftx-bone{animation:none}
  .fin .ftx-row,.ftx .ftx-chip{transition:none}
}