/* ===== Life Hourglass ===== */
.life-hourglass { display: flex; flex-direction: column; align-items: center; gap: var(--toddyi-size-1-25rem); margin-bottom: var(--toddyi-size-1-5rem); }
.hourglass { width: var(--toddyi-size-150px); height: auto; filter: drop-shadow(0 var(--toddyi-size-4px) var(--toddyi-size-10px) var(--toddyi-hourglass-shadow));
  transform-origin: var(--toddyi-size-50pct) var(--toddyi-size-50pct);
  animation: hg-pulse 10s ease-in-out infinite; /* A subtle pulse about once every ten seconds. */
}
/* Use a separate layer and period for motion so it does not look strictly periodic. */
.hg-wrap { display: inline-block; transform-origin: var(--toddyi-size-50pct) var(--toddyi-size-50pct); animation: hg-shake 13s ease-in-out infinite; }

/* Remain still most of the time, with an occasional small heartbeat. */
@keyframes hg-pulse {
  0%, 90%, 100% { transform: scale(1); }        /* Still for most of the cycle. */
  93%  { transform: scale(1.022); }              /* First beat. */
  95%  { transform: scale(1.002); }
  97%  { transform: scale(1.012); }              /* Second beat. */
  99%  { transform: scale(1); }
}
/* Remain still most of the time, with an occasional slight shake. */
@keyframes hg-shake {
  0%, 44%, 60%, 100% { transform: translate(0, 0) rotate(0deg); }
  48% { transform: translate(0.4px, -0.3px) rotate(0.25deg); }
  52% { transform: translate(-0.35px, 0.25px) rotate(-0.2deg); }
  56% { transform: translate(0.25px, 0.2px) rotate(0.15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hourglass, .hg-wrap, .hg-stream, .hg-grain { animation: none; }
  .hg-grain { opacity: 0; } /* no falling grains when motion is reduced (#102) */
}
.hg-frame { fill: none; stroke: var(--pico-primary); stroke-width: 2.5; stroke-linejoin: round; }
/* Center copper plate and frame. */
.hg-plate__base  { fill: url(#hg-plate); stroke: var(--toddyi-hourglass-frame); stroke-width: 0.9; }
.hg-plate__bevel { fill: none; stroke: var(--toddyi-hourglass-highlight); stroke-width: 0.7; } /* Inner highlight creates a beveled edge. */
.hg-rivet        { fill: var(--toddyi-hourglass-rivet); }
.hg-plate        { filter: drop-shadow(0 var(--toddyi-size-1px) 1.2px var(--toddyi-hourglass-plate-shadow)); }
/* Ultramarine username engraved into the copper plate. */
.hg-engrave {
  fill: var(--toddyi-hourglass-engraving); /* Ultramarine. */
  font-family: var(--toddyi-font-serif);
  font-size: var(--toddyi-size-7px);
  font-weight: 700;
  letter-spacing: 0.3px;
  /* A light lower shadow makes the text appear inset. */
  filter: drop-shadow(0 0.5px 0.1px var(--toddyi-hourglass-engraving-shadow));
}
.hg-cap { fill: var(--pico-primary); width: var(--toddyi-size-84px); height: var(--toddyi-size-6px); }
.hg-sand { fill: url(#hg-sand-grad); width: var(--toddyi-size-90px); transition: opacity 0.2s ease; } /* Warm amber sand. */
.hg-plate__base { width: var(--toddyi-size-68px); height: var(--toddyi-size-16px); }
.hg-plate__bevel { width: var(--toddyi-size-65-2px); height: var(--toddyi-size-13-2px); }

/* Animate a dashed stroke to represent a falling stream of sand. */
.hg-stream {
  fill: none;
  stroke: var(--toddyi-hourglass-sand); /* Warm amber. */
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  animation: hg-fall 0.6s linear infinite;
}
/* Falling grains of sand. */
.hg-grain {
  fill: var(--toddyi-hourglass-sand); /* Warm amber. */
  animation: hg-grain 1.15s ease-in infinite;
}
.hg-grain.hg-grain--2 { animation-delay: 0.38s; }
.hg-grain.hg-grain--3 { animation-delay: 0.76s; }

@keyframes hg-fall {
  to { stroke-dashoffset: -14; }
}
@keyframes hg-grain {
  0%   { transform: translateY(0);    opacity: 0; }
  12%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(72px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hg-stream, .hg-grain { animation: none; }
  .hg-grain { opacity: 0; }
}

.life-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--toddyi-size-0-75rem); width: var(--toddyi-size-100pct); max-width: var(--toddyi-size-640px); }
.life-stat {
  text-align: center; padding: var(--toddyi-size-1rem) var(--toddyi-size-0-5rem); border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  box-shadow: var(--toddyi-card-shadow);
}
.life-stat strong { display: block; font-size: clamp(var(--toddyi-size-1-1rem), var(--toddyi-size-4vw), var(--toddyi-size-1-8rem)); line-height: 1.15; font-variant-numeric: tabular-nums; word-break: break-all; }
.life-stat small { font-size: var(--toddyi-size-0-7rem); color: var(--pico-muted-color); }
.life-stat--accent strong { color: var(--pico-primary); }
.life-note { font-size: var(--toddyi-size-0-85rem); text-align: center; margin: 0; }
.life-settings { margin: 0; box-shadow: var(--toddyi-card-shadow); }
.life-settings header { margin-bottom: var(--toddyi-size-0-5rem); }

/* Pomodoro play/pause: swap icons by state class instead of emoji text. (#97) */
.pomodoro__toggle { display: inline-flex; align-items: center; justify-content: center; }
.pomodoro__toggle .icon { width: var(--toddyi-size-1-2rem); height: var(--toddyi-size-1-2rem); }
.pomodoro__toggle-pause { display: none; }
.pomodoro__toggle.is-running .pomodoro__toggle-play { display: none; }
.pomodoro__toggle.is-running .pomodoro__toggle-pause { display: inline-flex; }
.pomodoro-log__kind .icon { width: var(--toddyi-size-1rem); height: var(--toddyi-size-1rem); }

/* Timer detail: carded laps + icon+text action buttons. (#100) */
.timer-panel header { margin-bottom: var(--toddyi-size-0-5rem); }
.timer-actions button, .timer-actions a[role="button"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--toddyi-size-0-4rem);
  width: auto; margin: 0;
}
.timer-laps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--toddyi-size-0-2rem); }
.timer-laps li { display: flex; justify-content: space-between; align-items: center; padding: var(--toddyi-size-0-4rem) 0; border-bottom: var(--toddyi-size-1px) solid var(--pico-muted-border-color); }
.timer-laps li:last-child { border-bottom: 0; }
.timer-laps__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.timer-back[role="button"] { display: inline-flex; align-items: center; gap: var(--toddyi-size-0-4rem); width: auto; }