/* base.css — reset, typography, and global utility elements */
html, body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-t {
  font-family: var(--f-display) !important;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--tx);
}

.vcard-dur, .kpi-v, .pb-time, .pomo-time, .nook-meta-stat, .tabular {
  font-family: var(--f-mono) !important;
}


/* ---------- page layout ---------- */
.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .toast, .modal, .vcard, .vcard-thumb img, .vcard-play { animation: none !important; transition: none !important; }
}

/* ---------- skeleton shimmer ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--panel2) 25%, var(--panel3) 50%, var(--panel2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r2);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.chart-skeleton { min-height: 160px; width: 100%; border-radius: var(--r); }
.skel-card { height: 180px; border-radius: var(--r); }
.skel-line { height: 14px; width: 60%; margin: 8px 0; border-radius: 4px; }
.skel-circle { width: 40px; height: 40px; border-radius: 50%; }


/* ---------- accessible focus-visible ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-i:focus-visible, .vcard:focus-visible, .toast-act:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}


/* ---------- error boundary ---------- */
.err-panel { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.err-panel h2 { margin-bottom: 6px; font-size: 1.05rem; }
.err-detail {
  margin: 10px 0 14px; padding: 10px 12px; max-height: 190px; overflow: auto;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 9px;
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tx2); white-space: pre-wrap; word-break: break-word;
}
.chart-skeleton { min-height: 200px; display: grid; place-items: center; color: var(--muted); font-size: 12.5px; }

/* ---------- skip link (a11y) ---------- */
.skip-link {
  position: absolute;
  top: -999px;
  left: 16px;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 8px 16px;
  border-radius: var(--r2);
  font-weight: 600;
  font-size: 13px;
  z-index: 10000;
  text-decoration: none;
  box-shadow: var(--sh);
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid var(--tx);
  outline-offset: 2px;
}

/* ---------- screen reader announcer (a11y) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}