/* Pointless design tokens (light). Linked by connect.html, dashboard.html and me.html; components live in styles.css. */
:root{color-scheme:light;
 --bg:#fff;--bg2:#f2f2f7;--fill:#f2f2f7;--card:#fff;
 --ink:#111113;--text2:#3c3c43;--muted:#6e6e73;--faint:#aeaeb2;
 --line:#e5e5ea;--sep:rgba(60,60,67,.14);
 --accent:#e5603f;--accent-soft:#fdeee9;--good:#30b45a;--good-soft:#e8f7ed;--warn-soft:#fff7e0;--warn-ink:#8a6200;--danger:#d93a2f;
 --navy:#232f3e;--on-ink:#fff;
 --r-sm:10px;--r:14px;--r-lg:20px;
 --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
 --sec:28px;--sec-head:12px;   /* stacked page: 28px between major sections, 12px from a header to its content */
 --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,system-ui,sans-serif;
 --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;
 --mono:ui-monospace,"SF Mono",Menlo,monospace;
 --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
/* Timeline / price-marker hover tips (rhythm dots, Prices paid ticks, who-for months). No pointer unless the mark does something. */
.mk{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:default;background:transparent;line-height:0;position:relative;transition:transform .15s ease,box-shadow .15s ease}
.mk[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);
  transform:translateX(-50%);
  background:var(--ink);color:var(--on-ink);
  border-radius:10px;padding:7px 10px;
  font:12px/16px var(--sans);
  white-space:nowrap;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
  z-index:8;
}
.mk[data-tip]:hover::after,.mk[data-tip]:focus-visible::after{opacity:1}
.mk[data-align=start]::after{left:0;transform:none}
.mk[data-align=end]::after{left:auto;right:0;transform:none}
.mk:focus{outline:none}
.mk:focus-visible{outline:none}
.hl:has(.mk:is(:hover,:focus-visible)),
.hb:has(.mk:is(:hover,:focus-visible)),
.ms-list:has(.mk:is(:hover,:focus-visible)),
.wcard:has(.mk:is(:hover,:focus-visible)){overflow:visible}
@media (prefers-reduced-motion:reduce){.mk,.mk[data-tip]::after{transition:none}}

/* Shared loading skeleton. Shapes sit where real values will, so the page does not jump. */
@keyframes sk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes sk-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk{display:block;background-color:var(--fill);background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);background-size:200% 100%;animation:sk-shimmer 1.35s ease-in-out infinite;border-radius:6px;pointer-events:none;user-select:none;color:transparent}
.sk.line{height:12px;width:56%}
.sk.num{height:22px;width:52px}
.sk.tile{width:44px;height:44px;border-radius:10px;flex:none}
.sk.row{height:44px;width:100%;border-radius:10px}
.sk.bar{height:8px;width:100%;border-radius:4px;background:var(--line);background-image:none;animation:none}
.sk-flat{display:block;height:100%;border-radius:inherit;background:var(--line);width:36%}
.sk-dash{color:var(--faint);font-weight:500}
.sk-tag{font-size:12px;font-weight:400;color:var(--faint);margin-left:auto}
.sec h2:has(.sk-tag),.sk-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sk-in{animation:sk-fade .32s ease both}
.sk-list{display:grid}
.sk-btile{display:flex;align-items:center;gap:12px;min-height:44px;padding:0}
.sk-bars{display:flex;align-items:flex-end;gap:8px;height:88px;padding:8px 2px 0}
.sk-bars .sk.bar{flex:1;height:var(--h,36px);width:auto;background:var(--line)}
.sk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sk-src{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none;background-image:none}
  .sk-in{animation:none}
}