/* ══════════════════════════════════════════════════════════════════
   TECH VEDA — ACCOUNTING · components
   ══════════════════════════════════════════════════════════════════ */

/* ── card ───────────────────────────────────────────────────────── */
.card{
  border-radius:var(--r);border:1px solid var(--line);
  background:var(--glass-fill);
  backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.09),var(--shadow-sm);
  overflow:hidden}
:root[data-theme="light"] .card{background:#fff}
.card-head{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.card-head h2,.card-head h3{font-size:15px;font-weight:600;letter-spacing:-.018em;flex:1;min-width:0}
.card-head .sub{font-size:12px;color:var(--muted);font-family:var(--font-sans);font-weight:400;letter-spacing:0}
.card-body{padding:18px}
.card-body.flush{padding:0}
.card + .card{margin-top:18px}
/* …but not inside a container that already spaces its children with gap,
   or the second card is pushed down twice and stops lining up with the
   one beside it. */
.split > .card + .card,
.stack > .card + .card{margin-top:0}

.section-title{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-family:var(--font-display)}

/* ── stat tiles ─────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px;margin-bottom:20px}
.stat{padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--glass-fill);position:relative;overflow:hidden;
  backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.09),var(--shadow-sm)}
:root[data-theme="light"] .stat{background:#fff}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--muted-2);opacity:.7}
.stat.s-accent::after{background:var(--accent)}
.stat.s-green::after{background:var(--green)}
.stat.s-amber::after{background:var(--amber)}
.stat.s-red::after{background:var(--red)}
.stat .k{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.stat .v{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat .d{font-size:11.5px;color:var(--muted-2);margin-top:5px}

/* ── badges ─────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;
  font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;border:1px solid;line-height:1.5}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.b-grey{color:var(--muted);border-color:var(--line-2);background:color-mix(in srgb,var(--muted) 10%,transparent)}
.b-green{color:var(--green);border-color:color-mix(in srgb,var(--green) 36%,transparent);background:color-mix(in srgb,var(--green) 12%,transparent)}
.b-accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.b-amber{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 38%,transparent);background:color-mix(in srgb,var(--amber) 13%,transparent)}
.b-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 36%,transparent);background:color-mix(in srgb,var(--red) 12%,transparent)}
.b-blue{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 36%,transparent);background:color-mix(in srgb,var(--blue) 12%,transparent)}

/* ── toolbar ────────────────────────────────────────────────────── */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.toolbar .grow{flex:1;min-width:180px}
.search{position:relative;flex:1;min-width:190px;max-width:340px}
.search input{padding-left:35px}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--muted-2);pointer-events:none}
.toolbar select{width:auto;min-width:145px}

/* ── table ──────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
/* A table of two or three columns does not need the 640px floor that keeps
   wide ones from crushing — in a narrow column that floor is what puts a
   scrollbar under it. This fits the space instead, and lets long labels
   wrap rather than push the table sideways. */
table.tbl.tbl-fit{min-width:0}
table.tbl.tbl-fit th,table.tbl.tbl-fit td{white-space:normal}
table.tbl.tbl-fit .money{white-space:nowrap}
table.tbl th{
  text-align:left;padding:11px 14px;font-family:var(--font-display);
  font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;
  background:rgba(255,255,255,.025);position:sticky;top:0;z-index:1}
:root[data-theme="light"] table.tbl th{background:var(--surface-2)}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr{transition:background .16s var(--ease)}
table.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
:root[data-theme="light"] table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .r{text-align:right}
table.tbl .c{text-align:center}
table.tbl .money{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;letter-spacing:-.02em}
/* document numbers must never wrap mid-reference */
table.tbl td .mono{white-space:nowrap}
table.tbl .strong{font-weight:600}
table.tbl .t2{font-size:11.5px;color:var(--muted);margin-top:2px}
/* Not display:flex — that takes the cell out of table layout, so it
   stops sharing the row's height and its bottom border draws at its own
   content height instead of the row's, stepping out of line with the
   rest. It stays a table cell; the buttons space themselves. */
table.tbl .acts{white-space:nowrap;text-align:right}
table.tbl .acts > *{vertical-align:middle}
table.tbl .acts > * + *{margin-left:5px}
tr.row-link{cursor:pointer}

/* ── net-worth tables (in .tw wrapper) ─────────────────────────── */
.tw table{width:100%;border-collapse:collapse;font-size:13.5px}
.tw table th{
  text-align:left;padding:12px 14px;font-weight:600;font-size:13px;
  color:var(--text);background:transparent;border:none}
.tw table td{padding:12px 14px;vertical-align:middle;border-right:1px solid rgba(0,0,0,.08);
  border-bottom:1px solid rgba(0,0,0,.08)}
:root[data-theme="light"] .tw table td{border-right-color:rgba(0,0,0,.12);border-bottom-color:rgba(0,0,0,.12)}
.tw table tbody tr:last-child td{border-bottom:1px solid rgba(0,0,0,.08)}
:root[data-theme="light"] .tw table tbody tr:last-child td{border-bottom-color:rgba(0,0,0,.12)}
.tw table th:last-child,.tw table td:last-child{border-right:none}
.tw table .num-col{text-align:right}
.tw table .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tw table .muted{color:var(--muted)}
.tw table .pos{color:var(--green)}
.tw table .neg{color:var(--red)}
.tw table tfoot tr.total td{font-weight:600;border-top:2px solid rgba(0,0,0,.15)}
:root[data-theme="light"] .tw table tfoot tr.total td{border-top-color:rgba(0,0,0,.2)}
.tw table tbody tr:hover{background:rgba(255,255,255,.025)}
:root[data-theme="light"] .tw table tbody tr:hover{background:var(--surface-2)}
.tw table tbody tr.click{cursor:pointer}

.empty{padding:52px 24px;text-align:center;color:var(--muted)}
.empty svg{width:38px;height:38px;opacity:.4;margin-bottom:12px}
.empty h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--text)}
.empty p{font-size:13px;max-width:38ch;margin:0 auto 16px}

/* ── progress ───────────────────────────────────────────────────── */
.bar{height:5px;border-radius:3px;background:var(--line);overflow:hidden;min-width:70px}
.bar > i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--green));transition:width .45s var(--ease)}
.bar.full > i{background:var(--green)}

/* ── key/value list ─────────────────────────────────────────────── */
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;align-items:baseline}
.kv dt{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.kv dd.mono{font-size:12.5px}
@media(max-width:520px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:10px}}

/* ── line-item editor ───────────────────────────────────────────── */
.items{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.items-head,.item-row{display:grid;grid-template-columns:28px minmax(150px,1fr) 96px 62px 68px 116px 116px 32px;
  gap:8px;align-items:center;padding:9px 12px}
.items-head{background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
:root[data-theme="light"] .items-head{background:var(--surface-2)}
.item-row{border-bottom:1px solid var(--line)}
.item-row:last-child{border-bottom:none}
.item-row .sr{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);text-align:center}
.item-row input{padding:7px 10px;font-size:13px;border-radius:8px}
.item-row .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:13px;text-align:right;font-weight:600;letter-spacing:-.02em}
.item-row .del{padding:5px;color:var(--muted-2);border-radius:7px;cursor:pointer;
  background:none;border:1px solid transparent;display:grid;place-items:center}
.item-row .del:hover{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.item-row .del svg{width:14px;height:14px}
.items-head .r,.item-row .r{text-align:right}
@media(max-width:820px){
  .items-head{display:none}
  .item-row{grid-template-columns:1fr 1fr;gap:8px;padding:14px 12px;position:relative}
  .item-row .sr{position:absolute;left:12px;top:-9px;font-size:10px;background:var(--surface);padding:0 5px}
  .item-row .desc-c{grid-column:1/-1}
  .item-row .del{position:absolute;right:8px;top:8px}
}

.totals{display:flex;justify-content:flex-end}
.totals-box{width:min(340px,100%);display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface-2)}
:root[data-theme="light"] .totals-box{background:var(--surface-2)}
.totals-box .tr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13.5px}
.totals-box .tr span:first-child{color:var(--muted)}
.totals-box .tr .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.totals-box .tr.grand{border-top:1px solid var(--line-2);padding-top:10px;margin-top:3px;
  font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.026em}
.totals-box .tr.grand span:first-child{color:var(--text)}
.totals-box .tr.grand .v{color:var(--green)}
.words{font-size:12px;color:var(--muted);font-style:italic;margin-top:9px;text-align:right}

/* ── modal ──────────────────────────────────────────────────────── */
.modal-scrim{position:fixed;inset:0;z-index:80;background:rgba(3,5,9,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:grid;place-items:center;padding:20px;overflow-y:auto;
  animation:fadeIn .22s var(--ease) both}
.modal{
  width:100%;max-width:min(760px,100%);max-height:calc(100svh - 40px);
  display:flex;flex-direction:column;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);
  animation:modalIn .3s var(--ease) both}
.modal.wide{max-width:min(1040px,100%)}
.modal.narrow{max-width:min(480px,100%)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:14px;padding:17px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.modal-head h2{font-size:16.5px;font-weight:600;flex:1;min-width:0}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px;
  border-top:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}
.modal-foot .left{margin-right:auto}

/* ── toasts ─────────────────────────────────────────────────────── */
.toasts{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;
  gap:9px;pointer-events:none;max-width:min(370px,calc(100vw - 36px))}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);
  font-size:13.5px;pointer-events:auto;animation:toastIn .3s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .25s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(22px)}}
.toast svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px}
.toast.ok svg{color:var(--green)} .toast.err svg{color:var(--red)} .toast.info svg{color:var(--accent)}
.toast b{display:block;font-weight:600;margin-bottom:1px}
.toast .tm{color:var(--muted);font-size:12.5px}

/* ── misc ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;
  font-size:11.5px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--muted)}
:root[data-theme="light"] .chip{background:#fff}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:18px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:12px}
.nowrap{white-space:nowrap}
.tricolour{height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent) 0 33.3%,transparent 33.3% 66.6%,var(--green) 66.6% 100%)}
/* inline icons inside prose boxes need an explicit size — an unsized
   <svg> in a flex row stretches to the whole container */
.warn-box svg,.info-box svg,.empty svg.i-sm{width:17px;height:17px;flex:0 0 auto;margin-top:2px}
.warn-box{padding:11px 14px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55;
  color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);
  background:color-mix(in srgb,var(--amber) 10%,transparent);margin-bottom:14px}
.info-box{padding:11px 14px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55;
  color:var(--muted);border:1px solid var(--line);background:var(--surface-2);margin-bottom:14px}
:root[data-theme="light"] .info-box{background:var(--surface-2)}

/* ══ ATTACHMENTS ════════════════════════════════════════════════ */
.drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:20px 16px;border-radius:var(--r);cursor:pointer;text-align:center;
  border:1.5px dashed var(--line-2);background:var(--surface-2);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
:root[data-theme="light"] .drop{background:var(--surface-2)}
.drop:hover,.drop.over{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.drop svg{width:21px;height:21px;color:var(--muted);flex:0 0 auto}
.drop.over svg{color:var(--accent)}
.drop .dt{font-family:var(--font-display);font-size:13.5px;font-weight:600}
.drop .ds{font-size:11.5px;color:var(--muted-2);line-height:1.5}

.files{display:flex;flex-direction:column;gap:8px}
.file{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface-2);min-width:0}
:root[data-theme="light"] .file{background:#fff}
.file:hover{border-color:var(--line-2)}
.file.pending{border-style:dashed;
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.file .ext{
  width:34px;height:34px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:8.5px;font-weight:700;letter-spacing:.04em;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.file .fmeta{flex:1;min-width:0}
.file .fn{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:-.01em}
.file .fs{font-size:11.5px;color:var(--muted-2);margin-top:1px}
.file .facts{display:flex;gap:4px;flex:0 0 auto}
@media(max-width:560px){
  .file{flex-wrap:wrap}
  .file .facts{width:100%;justify-content:flex-end}
}

/* paperclip marker on list rows carrying an attachment */
.clip{display:inline-flex;vertical-align:-2px;margin-left:5px}
.clip svg{width:13px;height:13px;color:var(--muted-2);stroke-width:2}
.row-link:hover .clip svg{color:var(--accent)}

/* ══ FOLD ═══════════════════════════════════════════════════════
   A card that opens on click. Used where detail is worth keeping but
   not worth the room it takes when nobody is looking at it. */
.fold > summary{cursor:pointer;list-style:none;user-select:none}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary:hover{background:var(--surface-2)}
.fold > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fold:not([open]) > summary{border-bottom:0}
.fold > summary .chev{width:18px;height:18px;color:var(--muted);flex:0 0 auto;
  transition:transform .18s var(--ease)}
.fold[open] > summary .chev{transform:rotate(180deg)}
/* a two-column definition list reads better across a full-width card */
@media(min-width:760px){
  .kv-wide{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
    column-gap:18px}
}

/* A preview modal is sized by the page it shows, not by its text.
   The document is a fixed 210mm; inside the modal it is allowed to
   shrink to the width available so the whole page is visible instead of
   running off the side. */
/* As wide as the window allows. The page inside keeps its A4
   proportions and is scaled to fill that width by openDocPreview, which
   is the only thing that can know how much room there actually is — a
   fixed zoom is either too small on a large screen or overflows a
   small one. */
.modal.doc{max-width:min(1360px,100%);width:100%}
.modal.doc .modal-body{padding:0;background:#EAECF2}
.modal.doc .doc-preview{border-radius:0}

/* ══ EXPENSE LEDGER ═════════════════════════════════════════════
   One editable field per row, saved as it changes, so each needs to
   report its own outcome rather than share one banner. */
.exp-cat,.exp-rem{width:100%;font-size:12.5px;padding:7px 9px}
.exp-rem{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--font-sans)}
.exp-rem:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.exp-cat.saved,.exp-rem.saved{border-color:var(--green);
  background:color-mix(in srgb,var(--green) 10%,transparent)}
.exp-cat.failed,.exp-rem.failed{border-color:var(--red);
  background:color-mix(in srgb,var(--red) 10%,transparent)}
#expTbl td{vertical-align:top}
#expTbl .mono{font-size:11px;color:var(--muted-2);line-height:1.45}

/* tighter tables where a page of rows matters more than airiness */
.tbl-tight th,.tbl-tight td{padding:7px 10px;font-size:12.5px}
.tbl-tight .ptc{max-width:340px}
.tbl-tight .nar{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.tbl-tight tr.row-dirty td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.stats-tight{margin-bottom:14px}
.stats-tight .stat{padding:12px 14px}
.stats-tight .stat .v{font-size:19px}
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-size{font-size:12px;padding:5px 8px}
.card-foot{padding:10px 18px;border-top:1px solid var(--line)}
.exp-inv{width:100%;max-width:220px;font-size:11.5px;padding:5px 7px}

/* ── the password that opens a stored document ───────────────────
   Masked by default: these sit on a page anyone signed in can open,
   and a password should not be readable over a shoulder just because
   the file it belongs to is listed. */
.fpw{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12px}
.fpw .k{color:var(--muted)}
.fpw code{font-family:var(--font-mono,ui-monospace,Menlo,monospace);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1px 7px;letter-spacing:.04em;color:var(--text)}
.fpw .lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.fpw .lnk:hover{opacity:.8}

/* ── product notes ───────────────────────────────────────────────
   One card per note: the title is what a person scans for, so it
   leads, and the actions sit out of the way at the end of the head. */
.head-acts{display:flex;gap:6px;margin-left:auto;flex:0 0 auto}
.note-card .card-head{align-items:flex-start;gap:12px}
.note-card .card-head h2{font-size:15.5px}
.note-card .card-head .sub{display:block;margin-top:3px}

/* ── an upload in flight ─────────────────────────────────────────
   These take from seconds to minutes depending on the uplink, so the
   figure has to move: a still page reads as a broken one. */
.file.uploading{opacity:.92}
.file.uploading .ext{background:var(--accent);color:#1a1206;border-color:transparent;
  font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.fbar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:6px}
.fbar i{display:block;height:100%;background:var(--accent);
  transition:width .18s linear}

/* ══════════════════════════════════════════════════════════════════
   PERSONAL RECORDS — components this portal adds
   Net worth, person tiles, folder bar, record rows, secrets, import.
   ══════════════════════════════════════════════════════════════════ */

/* ── net worth ──────────────────────────────────────────────────── */
.nw-head{
  display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.1fr);
  gap:28px;align-items:center;
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow-sm);
}
.nw-figure .k{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:6px}
.nw-figure b{display:block;font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.03em;
  color:var(--accent-hi)}
.nw-head.neg .nw-figure b{color:var(--red)}
.nw-eq{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}

.nw-bars{display:flex;flex-direction:column;gap:12px}
.nw-bar{display:grid;grid-template-columns:104px 1fr auto;gap:12px;align-items:center;font-size:13px}
.nw-bar .lbl{display:flex;align-items:center;gap:6px;color:var(--muted)}
.nw-bar .lbl svg{width:14px;height:14px}
.nw-bar .track{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.nw-bar .track i{display:block;height:100%;border-radius:99px;transition:width .5s var(--ease)}
.nw-bar .track i.pos{background:linear-gradient(90deg,var(--accent),var(--accent-hi))}
.nw-bar .track i.neg{background:linear-gradient(90deg,var(--red),#FFA0A0)}
.nw-bar b{font-size:13.5px}
.nw-note{margin:14px 2px 0;font-size:13px;color:var(--muted)}
.nw-note b{color:var(--red)}

.two-up{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
td.pos,.pos{color:var(--green-hi)} td.neg,.neg{color:var(--red)}
tr.click{cursor:pointer} tr.click:hover{background:var(--surface-2)}
.row-who{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}

/* ── tiles: people, and a person's shelves ──────────────────────── */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:20px}
.tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  text-align:left;padding:18px 18px 16px;cursor:pointer;
  background:var(--glass-fill);border:1px solid var(--glass-stroke);
  border-radius:var(--r);color:var(--text);font:inherit;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.tile:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm)}
.tile-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--surface-2);color:var(--accent);margin-bottom:8px}
.tile-ico svg{width:19px;height:19px}
.tile-name{font-family:var(--font-display);font-weight:600;font-size:14.5px;letter-spacing:-.015em}
.tile-n{font-family:var(--font-mono);font-size:22px;letter-spacing:-.02em;margin-top:6px}
.tile-n i{font-family:var(--font-sans);font-style:normal;font-size:11.5px;color:var(--muted-2);margin-left:6px}
.tile-sub{font-size:11.5px;color:var(--muted-2)}
.tiles.people .tile{align-items:center;text-align:center}
.av.lg{width:46px;height:46px;font-size:15px;margin-bottom:8px}

/* ── folder bar ─────────────────────────────────────────────────── */
.folder-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.fchip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  color:var(--muted);font:inherit;font-size:13px;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.fchip svg{width:15px;height:15px}
.fchip:hover{color:var(--text);border-color:var(--line-2)}
.fchip.on{background:var(--surface-2);border-color:var(--accent);color:var(--text)}
.fchip i{font-style:normal;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
  background:var(--surface-2);padding:1px 6px;border-radius:99px}
.fchip.on i{background:rgba(47,212,192,.16);color:var(--accent-hi)}
.fchip-hint{font-size:12.5px;color:var(--muted-2)}

.folder-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin:0 2px 16px}
.folder-head h2{display:flex;align-items:center;gap:8px;font-size:17px}
.folder-head h2 svg{width:17px;height:17px;color:var(--accent)}
.row-actions{display:flex;gap:8px;flex:none}
.btn.danger{color:var(--red)}

/* ── record rows ────────────────────────────────────────────────── */
.rec-list{display:flex;flex-direction:column;gap:8px}
.rec{
  display:flex;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.rec:hover{border-color:var(--line-2);background:var(--surface-2)}
.rec-main{flex:1;min-width:0}
.rec-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-weight:600;font-size:14px;letter-spacing:-.01em}
.rec-title .badge svg{width:11px;height:11px;vertical-align:-1px}
.rec-kv{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:5px}
.kv{font-size:12px;color:var(--muted)}
.kv i{font-style:normal;color:var(--muted-2);margin-right:5px}
.kv b{font-weight:500;color:var(--text)}
.rec-acts{display:flex;gap:4px;flex:none}

.empty.sm{padding:28px 20px}
.empty.sm svg{width:30px;height:30px}

/* ── expiring ───────────────────────────────────────────────────── */
.warn-card{border-color:rgba(255,201,77,.34)}
.exp-list{display:flex;flex-direction:column;gap:6px}
.exp{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;
  width:100%;padding:9px 12px;cursor:pointer;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  color:var(--text);font:inherit;font-size:13px;
}
.exp:hover{background:var(--surface-2);border-color:var(--line)}
.exp b{font-weight:600}
.exp i{font-style:normal;color:var(--muted-2);font-size:12px}
.exp .mono{color:var(--muted);font-size:12px}
@media (max-width:640px){.exp{grid-template-columns:1fr;gap:3px}}

/* ── secrets ────────────────────────────────────────────────────── */
.secret-row{display:flex;gap:6px;align-items:stretch}
.secret-row input,.secret-row textarea{flex:1}
.secret-hint .lnk{margin-left:4px}
.secret-hint .cleared{color:var(--red);margin-left:6px}
.secret-val{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.secret-val code{font-family:var(--font-mono);font-size:13px;background:var(--surface-2);
  padding:2px 8px;border-radius:6px;user-select:all;word-break:break-all}
.lnk{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);
  font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.lnk:disabled{color:var(--muted-2);cursor:not-allowed;text-decoration:none}
.fpw{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:5px;font-size:11.5px}
.fpw .k{display:inline-flex;align-items:center;gap:4px;color:var(--muted-2)}
.fpw .k svg{width:11px;height:11px}
.fpw code{font-family:var(--font-mono);background:var(--surface-2);padding:1px 7px;border-radius:5px;
  user-select:all}

/* ── record detail ──────────────────────────────────────────────── */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:0 0 4px}
.detail > div.wide{grid-column:1/-1}
.detail dt{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);
  margin-bottom:3px}
.detail dd{margin:0;font-size:14px;word-break:break-word}
.detail-h{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2);
  margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.form-where{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  margin:0 0 16px}
.form-where svg{width:15px;height:15px;color:var(--accent)}
.hint-inline{font-weight:400;color:var(--muted-2);font-size:11px;margin-left:5px}
.req{color:var(--accent)}
@media (max-width:640px){.detail{grid-template-columns:1fr}}

/* ── person picker ──────────────────────────────────────────────── */
.pick-list{display:flex;flex-direction:column;gap:8px}
.pick{display:flex;align-items:center;gap:12px;width:100%;padding:11px 13px;cursor:pointer;
  text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text);font:inherit}
.pick:hover{border-color:var(--accent);background:var(--surface-2)}
.pick b{display:block;font-size:14px}
.pick i{font-style:normal;font-size:12px;color:var(--muted-2)}

/* ── account tagging ────────────────────────────────────────────── */
.chk-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chk{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:13.5px}
.chk:hover{border-color:var(--line-2)}
.chk input{accent-color:var(--accent);width:15px;height:15px}
.chk i{font-style:normal;color:var(--muted-2);font-size:11.5px;margin-left:6px}
@media (max-width:640px){.chk-list{grid-template-columns:1fr}}

/* ── paste import ───────────────────────────────────────────────── */
.col-order{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:5px 14px;margin:0;padding:0;list-style:none}
.col-order li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.col-order i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;
  display:grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:var(--surface-2);color:var(--accent);flex:none}
.imp-sum{margin:14px 0 10px;font-size:13px;color:var(--muted)}
.imp-sum b{color:var(--text)}
.imp-tw{max-height:230px;overflow:auto}
.drop-sm{padding:14px}
.drop-sm .ds{display:none}

/* ── avatars: a photo when there is one, initials when there is not ── */
.av.has-photo{padding:0;overflow:hidden;background:var(--surface-2)}
.av.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.av.xs{width:22px;height:22px;font-size:9px;border-radius:7px;flex:none}
.av.xl{width:66px;height:66px;font-size:21px;border-radius:20px;flex:none}
.nav-item .av{margin-right:0}

.person-head{display:flex;align-items:center;gap:16px;margin:0 2px 20px}
.person-head h2{font-size:20px;letter-spacing:-.02em}
.person-head p{margin-top:3px}

/* "Add a person" sits among the people but is an action, not a place */
.nav-item.faint{color:var(--muted-2)}
.nav-item.faint:hover{color:var(--text)}
.nav-item.faint svg{opacity:.75}

/* The owner's face on the sign-in and boot cards. Rounded, not circular,
   so it sits in the same family as the app icon it replaces. */
.login-brand img.dp{border-radius:16px;object-fit:cover;
  border:1px solid var(--glass-stroke);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}