/* ============================================================
   PAGES — Tab-specific styles
   ============================================================ */

/* --- Feeding Page ------------------------------------------ */
.feed-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.feed-type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-1); padding: var(--sp-3);
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: .8rem; font-weight: 600;
  color: var(--text-muted); transition: all .2s;
  touch-action: manipulation;
}
.feed-type-btn.active {
  border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-light);
}
.feed-type-btn__icon { font-size: 1.5rem; }

/* --- Amount Selector --------------------------------------- */
.amount-grid {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.amount-btn {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: .8125rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface);
  transition: all .2s; touch-action: manipulation;
}
.amount-btn.active {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent-dark);
}

/* --- Schedule ---------------------------------------------- */
.schedule-time-row input[type="time"] {
  font-size: .875rem; font-weight: 600;
}

/* --- Who Fed ----------------------------------------------- */
.who-grid {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.who-btn {
  flex: 1; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .8125rem; font-weight: 600; text-align: center;
  color: var(--text-muted); background: var(--surface);
  transition: all .2s; touch-action: manipulation;
}
.who-btn.active {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent-dark);
}

/* --- Potty Type -------------------------------------------- */
.potty-type-grid {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.potty-type-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-1);
  padding: var(--sp-3);
  border: 2px solid var(--border); border-radius: var(--radius);
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted); background: var(--surface);
  transition: all .2s; touch-action: manipulation;
}
.potty-type-btn.active {
  border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-light);
}
.potty-type-btn__icon { font-size: 1.5rem; }

/* --- Sleep ------------------------------------------------- */
.sleep-toggle-grid {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.sleep-toggle-btn {
  flex: 1; padding: var(--sp-3);
  border: 2px solid var(--border); border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; text-align: center;
  color: var(--text-muted); background: var(--surface);
  transition: all .2s; touch-action: manipulation;
}
.sleep-toggle-btn.active {
  border-color: var(--accent); color: var(--accent-dark);
  background: var(--accent-light);
}

/* --- Health Card Styles ------------------------------------ */
.health-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.health-card + .health-card { margin-top: var(--sp-2); }
.health-card__icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.health-card__info { flex: 1; }
.health-card__title { font-size: .875rem; font-weight: 600; }
.health-card__detail { font-size: .75rem; color: var(--text-muted); }
.health-card__status {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
}

/* --- Weaning Progress Bar ---------------------------------- */
.weaning-bar {
  height: 10px; background: var(--gray-100); border-radius: 5px;
  overflow: hidden; margin: var(--sp-2) 0;
}
.weaning-bar__fill {
  height: 100%; background: linear-gradient(90deg, var(--pink-300), var(--accent));
  border-radius: 5px; transition: width .5s;
}

/* --- Milestone Weeks --------------------------------------- */
.milestone-week {
  margin-bottom: var(--sp-4);
}
.milestone-week__header {
  font-size: .8125rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}

/* --- Date Group -------------------------------------------- */
.date-group {
  margin-bottom: var(--sp-4);
}
.date-group__header {
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}