/* =======================================================================
   PanelCoach — Base layer
   Reset, document defaults, global form defaults (16px floor),
   safe-area helpers, and legacy keyframes migrated from index.html.
   Depends on tokens.css (must be loaded first).
   ======================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--size-base);          /* 16px */
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ---- Global form defaults ----
   iOS Safari zooms on input focus when font-size < 16px. This rule is the
   blanket fix: every input, textarea, select defaults to 16px. Individual
   components can override only if they go BIGGER. */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: var(--size-base);
  line-height: var(--lh-normal);
}

textarea {
  resize: vertical;
}

textarea,
p,
div {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---- Safe-area helpers (iOS notch / home indicator) ---- */
.safe-top {
  padding-top: env(safe-area-inset-top, 0);
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 20px);
}
.safe-nav-bottom {
  /* Use on the floating bottom nav pill. Lifts it above the home indicator
     instead of sitting on top of it. Falls back to 1rem on browsers without
     env() support. */
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* ---- App opacity gate (prevents flash of pre-render content) ---- */
#app {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
#app.ready {
  opacity: 1;
}

/* ---- Hide the tailwind CDN dev warning in production ---- */
.fixed.bottom-0.right-0 {
  display: none !important;
}
[class*="tailwind"] {
  display: none !important;
}

/* ---- No-scrollbar helper (for horizontal scroll regions) ---- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---- Field validation error — legacy keyframes preserved ----
   The existing render-views.js field-error logic adds .field-error to
   invalid inputs; keep the animation identical so nothing breaks. */
@keyframes field-error-glow {
  0%, 100% { box-shadow: 0 0 8px 4px var(--status-error-glow); }
  50%      { box-shadow: 0 0 20px 8px rgba(248, 113, 113, 0.9); }
}
.field-error {
  animation: field-error-glow 0.8s ease-in-out 3 !important;
  border: 2px solid #F87171 !important;
  outline: 2px solid rgba(248, 113, 113, 0.4) !important;
  outline-offset: 2px !important;
}

/* ---- Selection ---- */
::selection {
  background: var(--accent-subtle-bg);
  color: var(--text-primary);
}

/* ---- Focus ring defaults (override per-component if needed) ---- */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ---- Scroll container accent ---- */
html {
  scroll-behavior: smooth;
}

/* View wrapper — added by each renderXxxView() around its output.
   No painted styles here; just a stable anchor for tab-*.css selectors. */
.view {
  display: block;
}