/* Anna Workout App — fullscreen mobile shell */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #f6ecd4; /* light default — overridden by JS once theme loads */
  color: #2f3a2a;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

html, body, #root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

#root {
  display: flex;
  flex-direction: column;
}

/* Buttons + inputs reset */
button {
  font: inherit;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Hide scrollbars on iOS but keep scrolling */
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* Loading splash before React mounts */
#root:empty::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #f6ecd4;
}

/* Weight input is capped at 3 digits, so we keep it tight.
   `field-sizing: content` sizes to the actual value on modern
   browsers; the 32px fallback covers older ones (3 chars at 14px). */
.weight-input {
  width: 32px;
  field-sizing: content;
  min-width: 1ch;
  max-width: 48px;
}

/* Pulse animation used by week tiles + signed-in dot */
@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Rest timer floating pill */
@keyframes rest-slide-up {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0);   opacity: 1; }
}
@keyframes rest-done-pulse {
  0%, 100% { box-shadow: 0 14px 36px -12px rgba(0,0,0,0.28), 0 0 0 0 rgba(154,168,131,0); }
  50%      { box-shadow: 0 14px 36px -12px rgba(0,0,0,0.28), 0 0 0 8px rgba(154,168,131,0.18); }
}
.rest-timer-wrap {
  transform: translateX(-50%);
  animation: rest-slide-up 320ms cubic-bezier(.2,.8,.2,1);
}
.rest-timer-pill.done {
  animation: rest-done-pulse 1.6s ease-in-out infinite;
}

/* Session finish overlay */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 22px; height: 22px;
  border: 2px solid rgba(232,223,208,0.18);
  border-top-color: #e8b879;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}