/*
 * Residual styles for behaviour Tailwind utilities can't cleanly express:
 * the animated SVG climber/flag, the sliding drawer, and native
 * :checked-driven task state (so the checklist works without JS).
 * All layout, colour and spacing lives in Tailwind classes in index.html / app.js.
 */

/* Ensure toggled elements stay hidden even when they also carry display utilities. */
.hidden { display: none !important; }

/* Goals climb — SVG climber + summit flag */
#climber {
  transition: transform 900ms cubic-bezier(.34, 1.2, .55, 1);
  transform: translate(40px, 212px);
}
#climber text { paint-order: stroke; }
#summitFlag #flagCloth {
  transform-origin: 0 -22px;
  transform: scale(.35);
  opacity: .5;
  transition: transform .5s ease, opacity .5s ease;
}
#mountain.summit #summitFlag #flagCloth {
  transform: scale(1);
  opacity: 1;
  animation: flagWave 1.1s ease-in-out infinite;
}
@keyframes flagWave {
  0%, 100% { transform: scale(1) skewY(0deg); }
  50% { transform: scale(1) skewY(-8deg); }
}

/* Slide-in drawer */
#drawerNav { transform: translateX(100%); transition: transform .2s ease; }
#drawerNav.open { transform: translateX(0); }

/* Custom checklist checkbox driven by the native :checked state */
.task-box svg {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.task-check:checked ~ .task-box { background: #059669; border-color: #059669; }
.task-check:checked ~ .task-box svg { opacity: 1; transform: scale(1); }
.task-check:checked ~ .task-text .task-title { color: #047857; }
.task-row:has(.task-check:checked) { background: #ecfdf5; border-color: #a7f3d0; }