:root {
  /* Colors (and color-scheme) come from theme.css, linked before this file. */
  --max-content-width: min(95vw, 1400px);
  --content-padding: max(1rem, 2vw);
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* Apple HIG minimum touch target */
  --tap-target: 44px;
  --offline-bar-height: 20px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: var(--content-padding);
  min-height: 100vh;
  overscroll-behavior-y: contain;
}

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

.main-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: .25rem;
}

@media (max-width: 800px) {
  :root {
    --max-content-width: 100%;
    --content-padding: 0.75rem;
  }
}

/* PWA support (classes injected by pwa.js) */
.pwa-standalone {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--offline-bg);
  color: var(--offline-text);
  text-align: center;
  padding: 1px 8px;
  line-height: 18px;
  font-size: 14px;
  z-index: 1001;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-indicator.show {
  transform: translateY(0);
}

/* Shown banner is fixed, so push the page down instead of covering it. */
body.is-offline {
  padding-top: calc(var(--content-padding) + var(--offline-bar-height));
}

.pwa-standalone.is-offline {
  padding-top: calc(env(safe-area-inset-top) + var(--offline-bar-height));
}