/* Turnout — rug check for your yard */

:root {
  --navy: #1B2A41;
  --navy-soft: #4A5B75;
  --paper: #F4EFFA;
  --paper-deep: #E7DDF4;
  --white: #FDFBFF;
  --rosette: #E8368F;
  --buttercup: #FFC93C;
  --rain: #3EA8C9;
  --field: #2F7A52;

  --stitch: rgba(27, 42, 65, 0.22);
  --shadow-soft: 0 2px 0 var(--paper-deep);

  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: 2.25rem;
  --step-4: 3rem;

  --sans: 'Nunito', system-ui, -apple-system, sans-serif;
  --display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body {
  background-image:
    radial-gradient(circle at 12% 4%, rgba(255, 201, 60, .18), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(232, 54, 143, .12), transparent 38%);
  background-attachment: fixed;
}

.wrap { max-width: 640px; margin: 0 auto; padding: 0 1.15rem 5rem; }

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; font-weight: 700; }

a { color: var(--rosette); }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--rosette);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: 1.35rem 0 .85rem;
}

.masthead h1 {
  font-size: var(--step-2);
  letter-spacing: -0.015em;
}

.masthead p {
  margin: 0;
  font-size: .875rem;
  color: var(--navy-soft);
}

/* ---------- yard picker ---------- */

.yard-bar {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.yard-chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .55rem .95rem;
  text-align: left;
  box-shadow: 3px 3px 0 var(--navy);
}

.yard-chip strong {
  font-family: var(--display);
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.yard-chip span { color: var(--navy-soft); font-size: .8rem; }

.icon-btn {
  flex: 0 0 auto;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 50%;
  background: var(--buttercup);
  border: 2px solid var(--navy);
  box-shadow: 3px 3px 0 var(--navy);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }

/* ---------- hero: the pony ---------- */

.paddock {
  position: relative;
  border: 3px solid var(--navy);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #CDEBF7 0%, #E6F4FA 58%, #DFF0E4 100%);
  box-shadow: 5px 5px 0 var(--navy);
}

.paddock[data-sky="wet"] { background: linear-gradient(180deg, #A9BACB 0%, #C6D3DE 55%, #D2E2D6 100%); }
.paddock[data-sky="cold"] { background: linear-gradient(180deg, #C5CFE8 0%, #DFE5F4 55%, #DCE8DF 100%); }

.pony { display: block; width: 100%; height: auto; }

.pony .rug { animation: settle .45s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 130px 110px; }
@keyframes settle { from { transform: translateY(-10px) scale(.96); opacity: 0; } }

.pony .drop { animation: fall 1.1s linear infinite; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(200px); } }

.pony .eye { animation: blink 6.5s infinite; transform-origin: 91px 52px; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.12); } }

/* ---------- the rug label: the one bold move ---------- */

.label {
  position: relative;
  margin: -2.6rem 1.1rem 0;
  background: var(--white);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.05rem;
  box-shadow: 4px 4px 0 var(--navy);
  border: 2px solid var(--navy);
  z-index: 2;
}

/* stitching, as on a sewn-in rug tag */
.label::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--stitch);
  border-radius: 7px;
  pointer-events: none;
}

.label-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

.label-verdict {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.label-fill {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 1.15rem;
  background: var(--rosette);
  color: var(--white);
  border-radius: 8px;
  padding: .18rem .6rem;
  margin-top: .35rem;
}

.label-fill[data-fill="none"] { background: var(--field); }
.label-fill[data-fill="0"] { background: var(--rain); }

.label-reason {
  margin: .45rem 0 0;
  max-width: 46ch;
  color: var(--navy);
}

.label-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 2px dotted var(--stitch);
  font-size: .82rem;
  color: var(--navy-soft);
}

.label-meta b { font-family: var(--display); color: var(--navy); font-size: .95rem; }

/* ---------- flags ---------- */

.flags { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }

.flags li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--white);
  border-left: 5px solid var(--buttercup);
  border-radius: 0 10px 10px 0;
  padding: .6rem .8rem;
  font-size: .93rem;
}

.flags li[data-kind="rain"] { border-left-color: var(--rain); }
.flags li[data-kind="wind"], .flags li[data-kind="cold"] { border-left-color: var(--rosette); }
.flags li i { font-style: normal; font-size: 1.05rem; line-height: 1.4; }

/* ---------- section headings ---------- */

section { margin-top: 2rem; }

section > h2 {
  font-size: var(--step-1);
  margin-bottom: .2rem;
}

section > p.sub {
  margin: 0 0 .8rem;
  color: var(--navy-soft);
  font-size: .875rem;
  max-width: 52ch;
}

/* ---------- hour strip ---------- */

.hours {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .2rem .1rem .7rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.hour {
  flex: 0 0 3.55rem;
  scroll-snap-align: start;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: .4rem .3rem .3rem;
  text-align: center;
  font-size: .78rem;
  position: relative;
}

.hour[data-turnout="1"] { background: #FFFDF3; border-color: var(--navy); }
.hour[data-turnout="0"] { opacity: .5; }

.hour-time { font-weight: 700; }
.hour-temp { font-family: var(--display); font-size: 1.1rem; line-height: 1.2; }

.hour-bar {
  height: 30px;
  margin: .2rem auto 0;
  width: 12px;
  border-radius: 4px 4px 2px 2px;
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
}

.hour-bar i {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--rain);
  border-radius: 3px;
}

.hour-mm { font-size: .68rem; color: var(--navy-soft); }

/* ---------- map ---------- */

.map-shell {
  border: 3px solid var(--navy);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--navy);
}

#map { height: 300px; background: var(--paper-deep); }

.heat-overlay { image-rendering: auto; mix-blend-mode: multiply; }

.map-tools {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  background: var(--white);
  border-top: 3px solid var(--navy);
}

.layer-toggle { display: flex; border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; }

.layer-toggle button {
  border: 0;
  background: var(--white);
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 700;
}

.layer-toggle button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

.map-tools input[type="range"] { flex: 1; min-width: 0; accent-color: var(--rosette); }

.map-time {
  font-family: var(--display);
  font-size: .95rem;
  min-width: 4.6rem;
  text-align: right;
}

.play {
  border: 2px solid var(--navy);
  background: var(--buttercup);
  border-radius: 50%;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
}

.legend {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .7rem .6rem;
  background: var(--white);
  font-size: .72rem;
  color: var(--navy-soft);
}

.legend-bands { display: flex; flex: 1; gap: 2px; }

.legend-bands .band { flex: 1; text-align: center; line-height: 1; }

.legend-bands .band i {
  display: block;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(27, 42, 65, .25);
}

.legend-bands .band small { font-size: .6rem; color: var(--navy-soft); }

.legend-unit { flex: 0 0 auto; font-size: .68rem; }

/* ---------- horse profile ---------- */

.profile { display: grid; gap: 1rem; }

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

legend {
  font-family: var(--display);
  font-size: 1rem;
  padding: 0 0 .35rem;
  font-weight: 700;
}

.choices { display: flex; flex-wrap: wrap; gap: .4rem; }

.choices label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .38rem .8rem;
  font-size: .88rem;
  user-select: none;
}

.choices input { position: absolute; opacity: 0; pointer-events: none; }

.choices label:has(input:checked) {
  background: var(--navy);
  color: var(--white);
}

.choices label:has(input:focus-visible) { outline: 3px solid var(--rosette); outline-offset: 2px; }

.name-row { display: flex; gap: .5rem; }

input[type="text"], input[type="search"], input[type="number"] {
  font-family: inherit;
  font-size: 1rem;
  padding: .6rem .8rem;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  width: 100%;
}

/* iOS double-taps to zoom unless an element opts out of that gesture. On the
   field picker that means an impatient second tap on Search, or on the postcode
   box, zooms the whole page instead of doing the thing you tapped. `manipulation`
   keeps scrolling and pinch zoom and drops only the double-tap.
   Deliberately not applied to the map: Leaflet sets its own touch-action on the
   container, and overriding it breaks dragging. */
button, input, select, textarea, a, label,
dialog, dialog * {
  touch-action: manipulation;
}

/* ---------- sheet / dialog ---------- */

dialog {
  border: 3px solid var(--navy);
  border-radius: 22px 22px 0 0;
  padding: 1.15rem 1.15rem 1.6rem;
  width: 100%;
  max-width: 640px;
  margin: auto auto 0;
  background: var(--paper);
  color: var(--navy);
}

dialog::backdrop { background: rgba(27, 42, 65, .45); }

dialog h2 { font-size: var(--step-1); margin-bottom: .6rem; }

.results { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .4rem; max-height: 46vh; overflow-y: auto; }

.results button {
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: .6rem .8rem;
}

.results strong { font-family: var(--display); display: block; }
.results span { font-size: .82rem; color: var(--navy-soft); }

.btn {
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--rosette);
  color: var(--white);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  padding: .55rem 1.3rem;
  box-shadow: 3px 3px 0 var(--navy);
}

.btn.ghost { background: var(--white); color: var(--navy); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }

.row { display: flex; gap: .5rem; align-items: center; margin-top: .9rem; }
.row .grow { flex: 1; }

/* ---------- states ---------- */

.status {
  background: var(--white);
  border: 2px dashed var(--navy);
  border-radius: 16px;
  padding: 1.1rem;
  text-align: center;
}

.status h2 { font-size: var(--step-1); margin-bottom: .3rem; }
.status p { margin: 0 0 .8rem; color: var(--navy-soft); }

.loading .label-verdict, .loading .label-reason { color: var(--navy-soft); }

.hidden { display: none !important; }

/* ---------- welfare note ---------- */

.welfare {
  margin-top: 2.2rem;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 16px;
  font-size: .9rem;
}

.welfare h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.welfare p { margin: 0 0 .5rem; }
.welfare p:last-child { margin-bottom: 0; }

footer {
  margin-top: 1.6rem;
  font-size: .78rem;
  color: var(--navy-soft);
  text-align: center;
}

@media (min-width: 560px) {
  .masthead h1 { font-size: var(--step-3); }
  .label-verdict { font-size: var(--step-4); }
  #map { height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- date line above the hour strip ---------- */

.date-line {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 .15rem;
  color: var(--navy);
}

/* ---------- day divider inside the hour strip ---------- */

.day-mark {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 .15rem;
  scroll-snap-align: start;
}

.day-mark span {
  font-family: var(--display);
  font-size: .78rem;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: .5rem .3rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .02em;
}

/* ---------- coat colour swatches ---------- */

.choices label.swatch {
  flex-direction: column;
  gap: .3rem;
  padding: .5rem .55rem .45rem;
  border-radius: 14px;
  width: 4.6rem;
  text-align: center;
  line-height: 1.2;
}

.choices label.swatch span { font-size: .68rem; }

.choices label.swatch i {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--navy);
}

.choices label.swatch:has(input:checked) i { box-shadow: 0 0 0 3px var(--buttercup); }

input[type="time"] {
  font-family: var(--display);
  font-size: 1.05rem;
}

/* ---------- seasonal scenes ---------- */

.paddock[data-season="spring"]    { background: linear-gradient(180deg, #CFEAF8 0%, #E8F5FB 58%, #E3F2E6 100%); }
.paddock[data-season="easter"]    { background: linear-gradient(180deg, #D6EDF9 0%, #EDF6FA 55%, #E6F4E9 100%); }
.paddock[data-season="summer"]    { background: linear-gradient(180deg, #B8E2F7 0%, #DAF0FB 55%, #E2F3E4 100%); }
.paddock[data-season="autumn"]    { background: linear-gradient(180deg, #C9D6DD 0%, #E4E2D6 55%, #E6E4CF 100%); }
.paddock[data-season="halloween"] { background: linear-gradient(180deg, #2E2440 0%, #4A3560 52%, #6B4A5E 100%); }
.paddock[data-season="bonfire"]   { background: linear-gradient(180deg, #1F2740 0%, #38304F 55%, #55425A 100%); }
.paddock[data-season="winter"]    { background: linear-gradient(180deg, #BFD2E2 0%, #DCE7F0 55%, #EDF3F7 100%); }
.paddock[data-season="christmas"] { background: linear-gradient(180deg, #23324D 0%, #44577A 52%, #C6D6DF 100%); }

/* the wet and cold overrides still win, so a storm reads as a storm */
.paddock[data-sky="wet"]  { background: linear-gradient(180deg, #A9BACB 0%, #C6D3DE 55%, #D2E2D6 100%); }
.paddock[data-sky="cold"] { background: linear-gradient(180deg, #C5CFE8 0%, #DFE5F4 55%, #DCE8DF 100%); }

/* falling leaves, snow and petals */
.pony .fall { animation: drift 7s linear infinite; }
.pony .leaves .fall { animation-duration: 8s; }
.pony .snow .fall { animation-duration: 11s; }
.pony .petals .fall { animation-duration: 9s; }
.pony .fall.f1 { animation-duration: 9.5s; }
.pony .fall.f3 { animation-duration: 6.5s; }
.pony .fall.f5 { animation-duration: 10.5s; }
.pony .fall.f7 { animation-duration: 7.5s; }

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translate(-14px, 110px) rotate(180deg); }
  92%  { opacity: .95; }
  100% { transform: translate(10px, 215px) rotate(360deg); opacity: 0; }
}

.pony .snow .fall { animation-name: snowfall; }
@keyframes snowfall {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translate(-8px, 215px); opacity: .3; }
}

/* holiday flourishes */
.pony .ghost { animation: bob 4.5s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, -9px); }
}

.pony .bat { animation: flit 5s ease-in-out infinite; transform-origin: center; }
.pony .bat.b2 { animation-duration: 6.5s; animation-delay: .8s; }
@keyframes flit {
  0%, 100% { transform: translate(0, 0) scaleY(1); }
  25%      { transform: translate(12px, -7px) scaleY(.6); }
  60%      { transform: translate(-9px, 4px) scaleY(1.1); }
}

.pony .bulb { animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.pony .firework { animation: burst 4.2s ease-out infinite; transform-origin: center; }
@keyframes burst {
  0%      { transform: scale(.1); opacity: 0; }
  12%     { opacity: 1; }
  45%     { transform: scale(1); opacity: .85; }
  70%     { transform: scale(1.25); opacity: 0; }
  100%    { transform: scale(1.25); opacity: 0; }
}

.pony .flame { animation: flicker 1.1s ease-in-out infinite; transform-origin: 24px 180px; }
.pony .flame.f2 { animation-duration: .8s; animation-delay: .2s; }
@keyframes flicker {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%      { transform: scaleY(1.18) scaleX(.92); }
}

.pony .pumpkin-glow { animation: twinkle 3.2s ease-in-out infinite; }

/* season picker */
.season-row { display: flex; align-items: center; gap: .5rem; }
.season-row select {
  font-family: var(--sans);
  font-size: 1rem;
  padding: .55rem .8rem;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white);
  color: var(--navy);
  flex: 1;
}

/* ---------- map status line ---------- */

.map-status {
  margin: 0;
  padding: 0 .7rem .7rem;
  background: var(--white);
  font-size: .78rem;
  color: var(--navy-soft);
  line-height: 1.4;
}

/* the pin is our own SVG, so strip the div wrapper's default box */
.field-pin { background: none; border: 0; }
.field-pin svg { display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 2px 2px rgba(27, 42, 65, .35)); }

/* multiply washed the heatmap out over the richer MapTiler tiles */
.heat-overlay { image-rendering: auto; mix-blend-mode: normal; }

/* ---------- coat combo box ---------- */

.combo { position: relative; }

.combo-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 14px;
  padding: .55rem .8rem;
  text-align: left;
  font-family: var(--display);
  font-size: 1.05rem;
  box-shadow: 3px 3px 0 var(--navy);
}

.combo-btn i, .combo-list i {
  flex: 0 0 auto;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 2px solid var(--navy);
  display: block;
}

.combo-btn span { flex: 1; }
.combo-btn b { font-size: .8rem; }

.combo-list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + .4rem);
  max-height: 17rem;
  overflow-y: auto;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--navy);
  padding: .4rem;
  -webkit-overflow-scrolling: touch;
}

.combo-group + .combo-group { border-top: 2px dotted var(--stitch); margin-top: .3rem; padding-top: .3rem; }

.combo-group-label {
  margin: .25rem 0 .2rem .5rem;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-soft);
  font-weight: 800;
}

.combo-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: .34rem .5rem;
  text-align: left;
  font-size: .95rem;
  color: var(--navy);
}

.combo-list button[aria-selected="true"] { background: var(--navy); color: var(--white); }
.combo-list button[aria-selected="true"] i { box-shadow: 0 0 0 3px var(--buttercup); }

.hint { margin: .45rem 0 0; font-size: .78rem; color: var(--navy-soft); }

/* the session actually being judged reads stronger than other turnout hours */
.hour[data-active="1"] { background: #FFFDF3; box-shadow: 0 0 0 2px var(--buttercup) inset; }

.date-line em { font-style: normal; font-weight: 400; font-size: .82rem; color: var(--navy-soft); }

/* ---------- rain legibility ---------- */

/* Grey the base tiles while rain is on screen. Colourful outdoor tiles and a
   translucent wash compete badly; this is the single biggest readability win. */
.leaflet-pane.tilePane.muted, .leaflet-tile-pane.muted {
  filter: saturate(.22) brightness(1.08) contrast(.92);
  transition: filter .25s ease;
}

.heat-overlay {
  image-rendering: auto;
  mix-blend-mode: normal;
  /* a soft outline makes the edge of a band findable at a glance */
  filter: drop-shadow(0 0 1px rgba(27, 42, 65, .45));
}

.wide {
  flex: 0 0 auto;
  border: 2px solid var(--navy);
  background: var(--white);
  border-radius: 999px;
  padding: .3rem .6rem;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}

.map-tools input[type="range"] { min-width: 3rem; }

/* ---------- masthead with the brew button ---------- */

.masthead {
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.masthead-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; min-width: 0; }

.brew {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--buttercup);
  color: var(--navy);
  text-decoration: none;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .3rem .6rem .3rem .5rem;
  box-shadow: 3px 3px 0 var(--navy);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.brew b { font-family: var(--display); font-size: .92rem; }
.brew:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }

/* On the narrowest phones the words go only if there is a price to show in
   their place. With an open amount the label is all the button has to say. */
@media (max-width: 380px) {
  .brew.has-price span { display: none; }
  .brew span { font-size: .74rem; }
}

/* ---------- grass / laminitis meter ---------- */

.grass-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--navy);
  padding: .8rem .9rem 1rem;
}

.grass-meter { display: block; width: 100%; height: auto; }

.grass-meter .needle { animation: settle-needle .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes settle-needle { from { opacity: 0; transform: translateY(-6px); } }

.grass-drivers { margin-top: .7rem; }

.grass-drivers li {
  border-left-color: var(--field);
  background: var(--paper);
  font-size: .9rem;
}

.grass-drivers li[data-kind="frost"], .grass-drivers li[data-kind="coldnight"] { border-left-color: var(--rain); }
.grass-drivers li[data-kind="flush"], .grass-drivers li[data-kind="season"] { border-left-color: var(--rosette); }
.grass-drivers li[data-kind="stress"], .grass-drivers li[data-kind="sun"] { border-left-color: var(--buttercup); }
.grass-drivers li[data-kind="dull"] { border-left-color: var(--field); }

.grass-safest {
  margin: .75rem 0 0;
  padding-top: .65rem;
  border-top: 2px dotted var(--stitch);
  font-size: .9rem;
}

.grass-when {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--navy-soft);
  font-weight: 700;
}

/* ---------- personal laminitis risk ---------- */

.risk-block {
  margin-top: .8rem;
  padding-top: .75rem;
  border-top: 2px solid var(--stitch);
}

.risk-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.risk-for { font-family: var(--display); font-size: 1.05rem; }

.risk-band {
  font-family: var(--display);
  font-size: .9rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .18rem .7rem;
  white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.chips .chip {
  font-size: .74rem;
  background: var(--paper-deep);
  border-radius: 999px;
  padding: .2rem .55rem;
}

.chips .chip.good { background: #DCEFE3; }

.risk-advice { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }

.risk-advice li {
  font-size: .87rem;
  padding-left: .9rem;
  position: relative;
  line-height: 1.45;
}

.risk-advice li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rosette);
}

.risk-details {
  margin-top: .8rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: .7rem .9rem;
}

.risk-details summary {
  font-family: var(--display);
  font-size: 1rem;
  cursor: pointer;
}

.risk-details .profile { margin-top: .7rem; }
.risk-details fieldset + fieldset { margin-top: .2rem; }

/* ---------- masthead with the brew button ---------- */

.masthead {
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.masthead-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; min-width: 0; }

.brew {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--buttercup);
  color: var(--navy);
  text-decoration: none;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .3rem .6rem .3rem .5rem;
  box-shadow: 3px 3px 0 var(--navy);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.brew b { font-family: var(--display); font-size: .92rem; }
.brew:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }

/* On the narrowest phones the words go only if there is a price to show in
   their place. With an open amount the label is all the button has to say. */
@media (max-width: 380px) {
  .brew.has-price span { display: none; }
  .brew span { font-size: .74rem; }
}

/* ---------- grass / laminitis meter ---------- */

.grass-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--navy);
  padding: .8rem .9rem 1rem;
}

.grass-meter { display: block; width: 100%; height: auto; }

.grass-meter .needle { animation: settle-needle .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes settle-needle { from { opacity: 0; transform: translateY(-6px); } }

.grass-drivers { margin-top: .7rem; }

.grass-drivers li {
  border-left-color: var(--field);
  background: var(--paper);
  font-size: .9rem;
}

.grass-drivers li[data-kind="frost"], .grass-drivers li[data-kind="coldnight"] { border-left-color: var(--rain); }
.grass-drivers li[data-kind="flush"], .grass-drivers li[data-kind="season"] { border-left-color: var(--rosette); }
.grass-drivers li[data-kind="stress"], .grass-drivers li[data-kind="sun"] { border-left-color: var(--buttercup); }
.grass-drivers li[data-kind="dull"] { border-left-color: var(--field); }

.grass-safest {
  margin: .75rem 0 0;
  padding-top: .65rem;
  border-top: 2px dotted var(--stitch);
  font-size: .9rem;
}

.grass-when {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--navy-soft);
  font-weight: 700;
}

/* ---------- personal laminitis risk ---------- */

.risk-block {
  margin-top: .8rem;
  padding-top: .75rem;
  border-top: 2px solid var(--stitch);
}

.risk-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.risk-for { font-family: var(--display); font-size: 1.05rem; }

.risk-band {
  font-family: var(--display);
  font-size: .9rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: .18rem .7rem;
  white-space: nowrap;
}

.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.chips .chip {
  font-size: .74rem;
  background: var(--paper-deep);
  border-radius: 999px;
  padding: .2rem .55rem;
}

.chips .chip.good { background: #DCEFE3; }

.risk-advice { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }

.risk-advice li {
  font-size: .87rem;
  padding-left: .9rem;
  position: relative;
  line-height: 1.45;
}

.risk-advice li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rosette);
}

.risk-details {
  margin-top: .8rem;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: .7rem .9rem;
}

.risk-details summary {
  font-family: var(--display);
  font-size: 1rem;
  cursor: pointer;
}

.risk-details .profile { margin-top: .7rem; }
.risk-details fieldset + fieldset { margin-top: .2rem; }

/* ---------- reminder toggle ---------- */

.switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }

.switch-track {
  flex: 0 0 auto;
  width: 3.1rem;
  height: 1.75rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  position: relative;
  transition: background .18s ease;
}

.switch-track i {
  position: absolute;
  top: 2px; left: 2px;
  width: 1.25rem; height: 1.25rem;
  border-radius: 50%;
  background: var(--navy);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.switch input:checked + .switch-track { background: var(--field); }
.switch input:checked + .switch-track i { transform: translateX(1.3rem); background: var(--white); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--rosette); outline-offset: 2px; }

/* ---------- tap the pony ----------
   Every reaction is a one-shot animation keyed off a class that poke.js adds
   and removes. The resting state is exactly the pony as it always was: the
   open mouth, heart and dust are all invisible until a tap. Durations here
   must match DURATION_MS in js/poke.js. */

#ponySlot { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pony .poke-zones > * { cursor: pointer; }
.pony .poke-zones, .pony .falling { -webkit-user-select: none; user-select: none; }
.pony .falling, .pony .rain { pointer-events: none; }

/* tail: a swish from the root, settling back */
.pony .tail { transform-origin: 172px 92px; }
.pony.poke-tail .tail { animation: poke-swish .75s ease-in-out; }
/* Negative is outward: the tail hangs behind the barrel, so swinging it in
   first hides it behind the rug. Flick out, recoil slightly, settle. */
@keyframes poke-swish {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-30deg); }
  42%  { transform: rotate(4deg); }
  62%  { transform: rotate(-16deg); }
  82%  { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

/* head: a chew. The resting smile hides while the mouth opens and closes. */
.pony .mouth-open { transform-box: fill-box; transform-origin: center; }
.pony.poke-head .mouth { animation: poke-mouth-hide .85s linear; }
.pony.poke-head .mouth-open { animation: poke-chew .85s ease-in-out; }
@keyframes poke-mouth-hide {
  0%, 100% { opacity: .7; }
  8%, 90%  { opacity: 0; }
}
@keyframes poke-chew {
  0%   { opacity: 0; transform: scaleY(.2); }
  12%  { opacity: 1; transform: scaleY(1); }
  32%  { transform: scaleY(.3); }
  52%  { transform: scaleY(1); }
  72%  { transform: scaleY(.3); }
  88%  { opacity: 1; transform: scaleY(.8); }
  100% { opacity: 0; transform: scaleY(.2); }
}

/* nose: a boop, and a heart floats off it */
.pony .heart { transform-box: fill-box; transform-origin: center; }
.pony.poke-nose .heart { animation: poke-heart 1.15s ease-out; }
@keyframes poke-heart {
  0%   { opacity: 0; transform: translate(0, 6px) scale(.3); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1.2); }
  34%  { transform: translate(-1px, -4px) scale(1); }
  100% { opacity: 0; transform: translate(-8px, -30px) scale(.85); }
}

/* ears: a flick, one after the other */
.pony .ear-l { transform-origin: 73px 26px; }
.pony .ear-r { transform-origin: 101px 26px; }
.pony.poke-ears .ear-l { animation: poke-ear-l .5s ease-in-out; }
.pony.poke-ears .ear-r { animation: poke-ear-r .5s ease-in-out .1s; }
@keyframes poke-ear-l { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-30deg); } 65% { transform: rotate(8deg); } }
@keyframes poke-ear-r { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(30deg); } 65% { transform: rotate(-8deg); } }

/* legs: paws the ground twice, kicking up a little dust */
.pony .leg-front { transform-origin: 117px 136px; }
.pony .dust { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pony.poke-legs .leg-front { animation: poke-paw 1s ease-in-out; }
.pony.poke-legs .dust { animation: poke-dust 1s ease-out; }
@keyframes poke-paw {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(26deg); }
  40% { transform: rotate(-3deg); }
  62% { transform: rotate(22deg); }
  80% { transform: rotate(-2deg); }
}
@keyframes poke-dust {
  0%, 38% { opacity: 0; transform: scale(.4) translate(0, 0); }
  48%     { opacity: .8; transform: scale(1) translate(-2px, -1px); }
  70%     { opacity: .6; transform: scale(1.1) translate(-4px, -3px); }
  84%     { opacity: .7; transform: scale(1.2) translate(-5px, -4px); }
  100%    { opacity: 0; transform: scale(1.4) translate(-8px, -6px); }
}

/* body: a shake, like shaking off rain */
.pony .horse { transform-origin: 130px 175px; }
.pony.poke-body .horse { animation: poke-shake .6s ease-in-out; }
@keyframes poke-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-2.4deg); }
  30% { transform: rotate(2.2deg); }
  45% { transform: rotate(-1.8deg); }
  60% { transform: rotate(1.4deg); }
  75% { transform: rotate(-.8deg); }
}

/* ---------- safe areas ----------
   Phones with a camera cutout or notch report how much of the screen edge is
   taken, and the page keeps clear of it. In the Android app the web view is
   already moved clear of the status bar natively (see android-patch.mjs), so
   these read 0 there and nothing is doubled; they matter for iPhone and for the
   installed web app. max() keeps the usual gutter where there is no cutout. */
.wrap {
  padding-left: max(1.15rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.15rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
.masthead { padding-top: calc(1.35rem + env(safe-area-inset-top, 0px)); }
dialog { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); }

/* ---------- How it works page ---------- */

.how-lede { font-size: 1.05rem; max-width: 58ch; margin: 0 0 1rem; }

.how-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.how-jump a {
  font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--navy);
  background: var(--white); border: 2px solid var(--navy); border-radius: 999px; padding: .25rem .7rem;
}

.how section { margin-top: 2.2rem; scroll-margin-top: 1rem; }
.how h3 { font-size: 1.05rem; margin: .1rem 0 .35rem; }

.how-step { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; margin: 1.1rem 0; }
.how-step p { margin: 0 0 .6rem; max-width: 60ch; }
.how-num {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 800;
}

.how-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .6rem; font-size: .9rem; background: var(--white); border: 2px solid var(--navy); border-radius: 12px; overflow: hidden; }
.how-table th, .how-table td { text-align: left; padding: .4rem .6rem; vertical-align: top; }
.how-table thead th { background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 700; }
.how-table tbody th { background: var(--paper-deep); font-family: var(--display); font-size: .88rem; }
.how-table tbody tr + tr td { border-top: 1px dotted var(--stitch); }
.how-table td:last-child { font-weight: 700; }
.how-table td:last-child:not(:has(*)) { overflow-wrap: anywhere; }
.how-table small { display: block; font-family: var(--sans); font-weight: 400; font-size: .72rem; opacity: .85; }

.how-list { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.how-list li { margin-bottom: .45rem; max-width: 62ch; }

.how-callout {
  background: var(--white); border: 2px solid var(--navy); border-left: 6px solid var(--field);
  border-radius: 14px; padding: .8rem 1rem; margin-top: 1.2rem;
}
.how-callout p { margin: .35rem 0 0; font-size: .92rem; }

.how-try {
  background: var(--white); border: 2px solid var(--navy); border-radius: 18px;
  box-shadow: 4px 4px 0 var(--navy); padding: .9rem; display: grid; gap: 1rem;
}
.how-controls { display: grid; gap: .8rem; }
.how-slider { display: grid; gap: .25rem; font-size: .9rem; font-weight: 700; }
.how-slider span { display: flex; justify-content: space-between; }
.how-slider output { font-family: var(--display); font-size: 1.05rem; }
.how-slider input { width: 100%; accent-color: var(--rosette); }
.how-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: .5rem; }
.how-selects label { min-width: 0; }
.how-selects label { display: grid; gap: .2rem; font-size: .8rem; font-weight: 700; }
.how-selects select {
  width: 100%; min-width: 0;
  font-family: var(--sans); font-size: .95rem; padding: .45rem .5rem;
  border: 2px solid var(--navy); border-radius: 10px; background: var(--white); color: var(--navy);
}

.how-result { display: grid; gap: .8rem; align-items: center; }
.mini-paddock { border-width: 2px; border-radius: 16px; box-shadow: 3px 3px 0 var(--navy); }
.how-answer .label-verdict { font-size: var(--step-2); }
.how-sum { margin: .35rem 0; font-size: .92rem; }
.how-result-grass .grass-card { box-shadow: none; }

.how-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: .3rem 0 .8rem; align-items: end; }
@media (max-width: 380px) { .how-months { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .5rem; } }
.how-month { display: grid; grid-template-rows: 3.2rem auto auto; text-align: center; font-size: .66rem; }
.how-month i { align-self: end; display: block; background: var(--rosette); border-radius: 3px 3px 0 0; opacity: .8; }
.how-month b { font-size: .68rem; }
.how-month span { color: var(--navy-soft); }

.how-bands { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 .6rem; }
.how-band {
  font-size: .8rem; border: 2px solid var(--navy); border-radius: 999px; padding: .2rem .6rem;
  background: color-mix(in srgb, var(--band) 30%, var(--white));
}

.how-factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.how-factor { margin: 0; }

.how-formula {
  font-family: var(--display); font-size: 1rem; background: var(--paper-deep);
  border-radius: 10px; padding: .5rem .75rem; display: inline-block;
}

.how-link { display: inline-block; margin-top: .6rem; font-size: .88rem; font-weight: 700; }

@media (min-width: 560px) {
  .how-result { grid-template-columns: 1fr 1.1fr; }
}

/* ---------- use my location ---------- */

.btn.locate { width: 100%; margin-top: .2rem; }
.btn:disabled { opacity: .7; cursor: progress; }

.locate-status {
  margin: .55rem 0 0;
  font-size: .88rem;
  color: var(--navy-soft);
}

.or {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .9rem 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.or::before, .or::after { content: ''; flex: 1; border-top: 2px dashed rgba(27, 42, 65, .25); }

.first-run { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.first-run .btn { flex: 1 1 10rem; }
.first-run[hidden] { display: none; }

/* Saved fields: `.results button` out-ranks `.icon-btn`, which stretched the
   remove button across the row and squashed the field name. */
.results .icon-btn {
  width: 2.85rem;
  padding: 0;
  align-self: center;
  text-align: center;
  border-radius: 50%;
  background: var(--buttercup);
}
.results li > button[data-id] { min-width: 0; }

/* ---------- frost and heat on the pony ----------
   Base styles are the resting look, so with reduced motion (which switches
   every animation off) the frost, breath and sweat still show, just still. */

.pony .frost, .pony .breath, .pony .sweat, .pony .shimmer { pointer-events: none; }

.pony .glint { transform-box: fill-box; transform-origin: center; animation: glint 2.8s ease-in-out infinite; }
.pony .glint.g1 { animation-delay: .7s; }
.pony .glint.g2 { animation-delay: 1.5s; }
.pony .glint.g3 { animation-delay: 2.1s; }
.pony .glint.g4 { animation-delay: 1.1s; }
.pony .glint.g5 { animation-delay: 2.5s; }
@keyframes glint {
  0%, 100% { opacity: .15; transform: scale(.4); }
  45%      { opacity: 1;   transform: scale(1.15); }
  60%      { opacity: .9;  transform: scale(.9); }
}

.pony .puff { transform-box: fill-box; transform-origin: center; animation: breath 3.2s ease-out infinite; opacity: .8; }
.pony .puff.p1 { animation-delay: .18s; }
.pony .puff.p2 { animation-delay: .36s; }
@keyframes breath {
  0%        { opacity: 0;   transform: translate(6px, 3px) scale(.4); }
  12%       { opacity: .95; }
  45%, 100% { opacity: 0;   transform: translate(-10px, -7px) scale(1.5); }
}

.pony .bead { animation: sweat-drip 2.6s ease-in infinite; }
.pony .bead.b1 { animation-delay: .9s; }
.pony .bead.b2 { animation-delay: 1.7s; }
.pony .bead.b3 { animation-delay: .4s; }
.pony .bead.b4 { animation-delay: 2.1s; }
@keyframes sweat-drip {
  0%   { opacity: 0; transform: translateY(-2px); }
  15%  { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; transform: translateY(1px); }
  90%  { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

.pony .wave { animation: shimmer 2.4s ease-in-out infinite; }
.pony .wave.w1 { animation-delay: .8s; }
.pony .wave.w2 { animation-delay: 1.5s; }
@keyframes shimmer {
  0%   { opacity: 0;   transform: translateY(4px); }
  40%  { opacity: .9; }
  100% { opacity: 0;   transform: translateY(-10px); }
}

.paddock[data-sky="frost"] { background: linear-gradient(180deg, #CFDDF0 0%, #E6EEF8 55%, #E4EEF2 100%); }
.paddock[data-sky="hot"]   { background: linear-gradient(180deg, #FFE3B8 0%, #FFF1D6 55%, #EAF2D8 100%); }

/* ---------- heat advice card ---------- */

.heat-card {
  margin-top: .9rem;
  background: #FFF4E0;
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: .85rem 1rem .9rem;
  box-shadow: 3px 3px 0 var(--navy);
}
.heat-card[hidden] { display: none; }
.heat-card[data-level="danger"] { background: #FFE1DA; }
.heat-card h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 .25rem; display: flex; gap: .45rem; align-items: center; }
.heat-card p { margin: 0 0 .5rem; font-size: .92rem; }
.heat-card ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; font-size: .92rem; }
.heat-card .heat-note { margin: .6rem 0 0; font-size: .82rem; color: var(--navy-soft); }

/* How it works: one-tap example days for the rug calculator */
.how-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .9rem; }
.how-presets button {
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: 700 .88rem/1 var(--sans);
  padding: .45rem .75rem;
  box-shadow: 2px 2px 0 var(--navy);
}
.how-presets button:active { transform: translate(2px, 2px); box-shadow: none; }
#tHeat { margin-top: 1rem; }

/* ---------- snow and thunderstorms on the pony ---------- */

.pony .snowfall, .pony .storm { pointer-events: none; }

.pony .flake { animation: flake-fall 5.5s linear infinite; }
.pony .flake.k1 { animation-duration: 6.8s; }
.pony .flake.k2 { animation-duration: 4.8s; }
@keyframes flake-fall {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: 1; }
  30%  { transform: translate(6px, 64px); }
  60%  { transform: translate(-5px, 130px); }
  90%  { opacity: 1; }
  100% { transform: translate(4px, 212px); opacity: 0; }
}

/* The flash is soft and brief, twice in a six second cycle: no strobing. */
.pony .flash { opacity: 0; animation: storm-flash 6s ease-out infinite; }
.pony .bolt  { animation: storm-bolt 6s ease-out infinite; }
@keyframes storm-flash {
  0%, 60%, 100% { opacity: 0; }
  62%  { opacity: .35; }
  66%  { opacity: 0; }
  70%  { opacity: .22; }
  78%  { opacity: 0; }
}
@keyframes storm-bolt {
  0%, 60%  { opacity: 0; }
  62%, 76% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

.paddock[data-sky="snow"]  { background: linear-gradient(180deg, #C9D3E3 0%, #E3E9F2 55%, #E8EEF3 100%); }
.paddock[data-sky="storm"] { background: linear-gradient(180deg, #7F8BA3 0%, #A7B2C4 55%, #C9D5D2 100%); }
@media (prefers-reduced-motion: reduce) {
  /* Still snow, just not falling: spread the flakes down the sky. */
  .pony .flake.k0 { transform: translateY(60px); }
  .pony .flake.k1 { transform: translateY(118px); }
  .pony .flake.k2 { transform: translateY(34px); }
}

/* ---------- several horses ---------- */

.horse-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .9rem;
}

.horse-chip {
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  padding: .4rem .85rem;
  box-shadow: 2px 2px 0 var(--navy);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horse-chip.on { background: var(--rosette); color: var(--white); }
.horse-chip.add { background: var(--buttercup); }
.horse-chip.remove { padding: .4rem .7rem; background: var(--white); }
.horse-chip:active { transform: translate(2px, 2px); box-shadow: none; }

/* The switcher above the pony: names only, and only with more than one horse. */
.horse-switch {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .6rem;
}
.horse-switch[hidden] { display: none; }

.horse-tab {
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  padding: .45rem .9rem;
  box-shadow: 2px 2px 0 var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horse-tab.on { background: var(--rosette); color: var(--white); }
.horse-tab:active { transform: translate(2px, 2px); box-shadow: none; }