/* =====================================================================
   base.css: fonts, typography, focus, page layout primitives.
   Colors always come from styles/tokens.css.
   ===================================================================== */

/* ---------- Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-variable-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans-variable-latin.woff2') format('woff2');
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../assets/fonts/caveat-variable-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Shared non-color design values ---------- */
:root {
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Caveat', 'Segoe Print', cursive;
  --radius-card: 14px; --radius-btn: 10px; --radius-input: 10px; --radius-modal: 20px;
  --shadow-sm: 0 1px 2px rgba(58,46,48,0.05);
  --shadow-md: 0 4px 14px rgba(58,46,48,0.07);
  --shadow-lg: 0 12px 32px rgba(58,46,48,0.10);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 260px; --rail-w: 72px; --bottom-nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* Dark theme uses borders, not shadows */
[data-theme="dark"] { --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 12px 32px rgba(0,0,0,0.35); }

/* "Larger text" setting scales everything by 112.5% */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html.larger-text { font-size: 112.5%; }

html, body { background: var(--bg); color: var(--text); }
/* The hidden attribute always wins over component display rules */
[hidden] { display: none !important; }
#print-root { display: none; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.55; font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  color: var(--heading);
  letter-spacing: -0.005em;
  margin: 0;
}
h1, .h1 { font-size: 1.5rem; line-height: 1.25; }
h2, .h2 { font-size: 1.125rem; line-height: 1.3; }
h3, .h3 { font-size: 1rem; line-height: 1.35; }
@media (min-width: 1024px) {
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.1875rem; }
}
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
.section-label {
  font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-muted); margin: 0;
}
.text-secondary { font-size: 0.875rem; color: var(--text-muted); }
.caption { font-size: 0.8125rem; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.font-accent, .accent-script {
  font-family: var(--font-accent); font-weight: 500; font-size: 1.375rem; line-height: 1.3;
}
.tabular, .stat-number, table { font-variant-numeric: tabular-nums; }
.stat-number { font-family: var(--font-body); font-weight: 600; font-size: 1.75rem; line-height: 1.15; color: var(--heading); }
@media (min-width: 1024px) { .stat-number { font-size: 2rem; } }
strong, b { font-weight: 600; }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* Headings and main receive focus only so screen readers announce the new page */
#page-title:focus, #main:focus, .dialog:focus { outline: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  padding: 10px 16px; border-radius: var(--radius-btn); font-weight: 600; text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: calc(12px + var(--safe-top)); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Icons (Lucide sprite) ---------- */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.icon-18 { width: 18px; height: 18px; }
.icon-24 { width: 24px; height: 24px; }
.icon-16 { width: 16px; height: 16px; }

/* ---------- App layout ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.main-col { min-width: 0; }
.content {
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 0 16px calc(var(--bottom-nav-h) + 96px + var(--safe-bottom));
}
@media (min-width: 768px) {
  .main-col { margin-left: var(--rail-w); }
  .app.rail-expanded .main-col { margin-left: var(--sidebar-w); }
  .content { padding: 0 24px 112px; }
}
@media (min-width: 1024px) {
  .main-col, .app.rail-expanded .main-col { margin-left: var(--sidebar-w); }
  .content { padding: 0 32px 112px; }
}

/* Page body spacing */
.page { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .page { gap: 24px; } }
.page-sub { color: var(--text-muted); font-size: 1rem; margin-top: -4px; }

/* 12-column grid used by Today and two-column pages */
.grid-12 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .span-8, .span-12 { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; }
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.stack-4 > * + * { margin-top: 4px; }
.stack-8 > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }

hr, .divider { border: 0; border-top: 1px solid var(--divider); margin: 0; }

/* Body padding when the update banner shows is set inline by the locked script */
body.has-bottom-sheet { overflow: hidden; }