/* Willowmere (public/js/willowmere.ts): the lock's panel and its water gauge, the logbook, the
   Dabchick's timetable, Josiah's foals, the stalls and the Lockfolk's shops, the punt race's time.
   Canal green, brass and rose red, like the narrowboats' painted ware. */
.wm-lock { display: flex; flex-direction: column; gap: 6px; }
.wm-lock .btn { margin: 2px 0; }
.wm-gauge { position: relative; align-self: flex-end; width: 34px; height: 64px; border: 2px solid #5a564e; border-radius: 4px; background: #3e5a3a; overflow: hidden; margin: -4px 0 -2px; }
.wm-gauge-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#8ab0a4, #46706a); transition: height .4s; }
.wm-gauge span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; text-shadow: 0 1px 0 #000; }
.wm-log .row, .wm-punt .row { padding: 3px 0; border-bottom: 1px dashed #c8b890; font-size: 13px; }
.wm-log .row b { color: #2a5a3a; }
.wm-names { margin-top: 8px; font-size: 12px; color: #5a4a3a; font-style: italic; }
.wm-dab .sub { font-variant-numeric: tabular-nums; }
.wm-shop { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wm-shop .btn { display: inline-flex; align-items: center; gap: 4px; }
.wm-npc { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #c8b890; display: flex; flex-direction: column; gap: 6px; }
.wm-foals { display: flex; flex-direction: column; gap: 10px; }
.wm-foal { display: flex; gap: 10px; align-items: center; padding: 6px; border: 2px solid #e0b040; border-radius: 8px; background: rgba(42, 90, 58, .08); }
.wm-foal-pic { image-rendering: pixelated; flex: 0 0 auto; }
.wm-foal .row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.wm-name { width: 120px; padding: 4px 6px; border: 1px solid #a8844a; border-radius: 6px; font: inherit; }
.wm-time { font-size: 30px; text-align: center; color: #2a5a3a; font-weight: bold; font-variant-numeric: tabular-nums; margin: 6px 0; }
@media (max-width: 600px) {
  .wm-foal { flex-direction: column; align-items: flex-start; }
  .wm-name { width: 100%; }
}