/* Reset + typography + page-shell primitives */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* A stray wide element (a long unbroken string, an unwrapped header row)
     should scroll inside its own container, never widen the page itself —
     the fixed nav bars size themselves off this viewport, and any body-level
     horizontal overflow visibly distorts them. */
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul { margin: 0; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 600; }

a { color: inherit; text-decoration: none; }

/* The [hidden] attribute is only display:none by default via the browser's
   own stylesheet, which any author rule with an explicit `display` (e.g.
   .reveal-check's display:flex) silently overrides regardless of
   specificity — a real bug this app hit (a "hidden" checkmark that was
   never actually hidden). This forces it to win over any such class. */
[hidden] { display: none !important; }

ul { list-style: none; padding: 0; }

.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.2em;
}

/* App shell: content area leaves room for the fixed mobile tab bar,
   and gets pushed right by the fixed sidebar once we're at desktop widths.
   These offsets only apply on authenticated pages (body.has-nav) — the
   login screen has no nav and uses the plain centered layout instead. */
.app-shell {
  min-height: 100vh;
}

.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

body.has-nav .content {
  padding-bottom: calc(var(--tabbar-total-height) + var(--space-6));
}

@media (min-width: 768px) {
  body.has-nav .content {
    margin-left: var(--sidebar-width);
    padding: var(--space-6) var(--space-6) var(--space-7);
    max-width: calc(var(--content-max) + var(--space-6) * 2);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}