/* ============================================
   LIFE OS v2 — paper-and-ink design system
   Source of truth: life-os-wealth.html
   ============================================ */

:root{
  --paper:#E8E9E3;
  --panel:#F3F4EF;
  --ink:#16191A;
  --mid:#6E7671;
  --rule:#CDD0C7;
  --deep:#1D4E5F;
  --pos:#2F6B4F;
  --neg:#A33B2A;
  --warn:#C9A227;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:14px;
}
.wrap{max-width:940px;margin:0 auto}
.num{font-variant-numeric:tabular-nums}
.lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.card{background:var(--panel);border:1px solid var(--rule);padding:16px;margin-bottom:12px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .dim{color:var(--mid)}
a{color:var(--deep)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--deep);outline-offset:2px}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:14px;gap:12px;flex-wrap:wrap}
.crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.crumb b{font-weight:700}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pos);margin-right:5px;vertical-align:1px}
.dot.stale{background:var(--warn)}

/* headline */
.net{font-size:clamp(28px,7vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.since{font-size:13px;margin-top:6px}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.duo>div{background:var(--panel);padding:14px 16px}
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:16px}
.trio div{background:var(--panel);padding:11px 12px}
.trio .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}

/* spark */
.spark{margin:14px -16px 0;height:64px;display:block;width:calc(100% + 32px)}

/* allocation band */
.band{display:flex;height:26px;border:1px solid var(--ink);margin:12px 0 10px;overflow:hidden}
.band span{display:block;border-right:1px solid var(--ink)}
.band span:last-child{border-right:none}
.keys{display:flex;flex-wrap:wrap;gap:14px}
.key{display:flex;align-items:center;gap:6px;font-size:11px}
.sw{width:10px;height:10px;border:1px solid var(--ink)}

/* table */
table{width:100%;border-collapse:collapse}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);text-align:right;font-weight:400;padding:0 0 8px;border-bottom:1px solid var(--rule)}
th:first-child,td:first-child{text-align:left}
td{padding:10px 0;border-bottom:1px solid var(--rule);text-align:right;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
.aname{font-weight:600;font-size:14px}
.asub{font-size:10px;color:var(--mid);letter-spacing:.08em;text-transform:uppercase}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll table{min-width:620px}

/* drift meter */
.meter{position:relative;width:74px;height:9px;background:#DDDFD8;display:inline-block;vertical-align:middle;margin-right:7px}
.meter i{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--mid)}
.meter b{position:absolute;top:0;bottom:0;background:var(--deep)}

/* callout (telegram-style) */
.tg{border:1px solid var(--rule);border-left:3px solid var(--deep);background:var(--panel);padding:14px 16px;margin-bottom:12px}
.tg p{margin:3px 0;font-size:13px}
.tg .time{font-size:10px;color:var(--mid);letter-spacing:.14em;margin-bottom:8px}
.tg.alert{border-left-color:var(--neg)}

.feeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 18px;font-size:11px}
.feeds div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--rule);padding-bottom:4px}
.foot{font-size:10px;color:var(--mid);margin-top:16px;line-height:1.7}

button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:none;padding:8px 12px;cursor:pointer}
button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
button.quiet{background:transparent;color:var(--mid);border:1px solid var(--rule)}

/* forms */
input,select{font-family:var(--mono);font-size:13px;background:#fff;border:1px solid var(--rule);color:var(--ink);padding:8px 10px}
input:focus-visible,select:focus-visible{outline:2px solid var(--deep);outline-offset:1px}

/* login */
.login-wrap{max-width:340px;margin:18vh auto 0}
.login-wrap form{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.err{color:var(--neg);font-size:12px;margin-top:8px}

details summary{cursor:pointer;font-size:11px;color:var(--mid);letter-spacing:.1em;text-transform:uppercase;padding:6px 0}