:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --border: #E6E1D6;
  --text: #1C1810;
  --text-secondary: #86795F;
  --text-tertiary: #5C543F;
  --accent: #C1512D;
  --accent-soft: #F3DCCB;
  --accent-soft-text: #7A3A20;
  --success: #3F6B4F;
  --success-soft: #DCEBDF;
  --muted-soft: #EFEAE0;
  --dark: #1C1810;
  --dark-text-soft: #C9C2B2;
}

/* Stops the double-tap-to-zoom gesture (an easy accident on a tap target
   right after another tap) without touching pinch-zoom, which stays
   available for accessibility. */
* { box-sizing: border-box; touch-action: manipulation; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Work Sans', sans-serif;
}

h1, h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  margin: 0;
}

/* Browsers don't make <button> inherit color from an ancestor by default —
   Chrome's UA default happens to look black (matching --text) but Safari/
   WebKit's is system blue, which only ever surfaced once this app ran in
   an actual WKWebView (the iOS app shell), never in Chromium-based testing. */
button { font-family: inherit; color: inherit; }
input[type="number"] { font-family: inherit; -moz-appearance: textfield; }

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Zero on a normal browser tab; on iOS in the Capacitor shell (edge-to-edge
     WKWebView, viewport-fit=cover above) these resolve to the notch/status-bar
     and home-indicator heights, so the header and tab bar stay clear of them. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Below this width the app is a full-bleed mobile shell (unchanged from
   the original design). Above it, frame it as a centered desktop panel
   instead of a narrow phone-width column floating in empty space — same
   internal layout/scroll behavior throughout, just a wider, visually
   deliberate container. */
@media (min-width: 640px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 32px 16px;
  }
  #app {
    max-width: 640px;
    width: 100%;
    height: 85vh;
    height: 85dvh;
    max-height: 900px;
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 70px rgba(28, 24, 16, 0.1);
  }
}

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(28, 24, 16, 0.03);
}

/* The uppercase small label introducing a group (WARM-UP, MAIN WORK,
   SUPPLEMENTAL, etc.) — was 6 slightly different inline variants
   (10/11px, 0.06/0.08em tracking, secondary/tertiary color) scattered
   across the app; consolidated into one consistent style. Individual call
   sites still set their own margin via an inline style override when it
   differs from the 8px default. */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* Descriptive sub-text under a heading — was 14 slightly different
   inline variants (12/13px, secondary/tertiary color); consolidated the
   same way. Margin varies by context and stays inline. */
.hint {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  border: none;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
  padding: 16px;
  width: 100%;
  transition: transform 0.08s ease, opacity 0.12s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-dark { background: var(--dark); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent-soft-text); }
.btn-text {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.btn:disabled { opacity: 0.35; cursor: default; }
.btn:active:not(:disabled) { transform: scale(0.98); opacity: 0.92; }

.icon-btn {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.icon-btn:active { background: var(--muted-soft); }

/* Every tap target gets a real pressed/hover/focus state — previously
   the app had none at all beyond .btn's own opacity-on-disabled, so
   nothing gave feedback on tap and there was no visible keyboard-focus
   ring anywhere (relevant now that the app is used at desktop width
   too). Scoped to actual controls, not every element, so it doesn't
   put an outline around e.g. plain display cards. */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.card:active,
.card-row button:active {
  background: var(--muted-soft);
}
@media (hover: hover) {
  button.card:hover {
    border-color: var(--text-secondary);
  }
}

.segmented {
  display: flex;
  background: var(--muted-soft);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.segmented button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 8px;
  cursor: pointer;
}
.segmented button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(28, 24, 16, 0.08);
}

.dots { display: flex; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.dot.filled { background: var(--accent); }

.switch {
  width: 44px;
  height: 26px;
  border-radius: 13px;
  border: none;
  position: relative;
  cursor: pointer;
  padding: 0;
  background: var(--border);
}
.switch.on { background: var(--accent); }
.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.switch.on .knob { left: 21px; }

.stat-value {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
}

.list-gap { display: flex; flex-direction: column; gap: 8px; }

.scroll-area { flex: 1; overflow-y: auto; }

.header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 24px 0;
}

.sticky-bottom {
  padding: 14px 24px 22px;
  border-top: 1px solid var(--border);
}

.badge {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}