/* ============================================================================
   Aqua Book — aqua tone
   Loads AFTER field-ledger.css and changes nothing but colour and motion.

   The field ledger stylesheet is kept whole: its 48px inputs, 44px buttons,
   focus rings, skip link, Telugu line height, print rules and desktop sidebar
   are all better than what I had, and several of them are accessibility the
   old stylesheet simply lacked.

   Four things are restored here, and one deliberately is not:

   1. The palette returns to aqua. His #174c40 is a green-teal; for an app about
      water it should read as water. Both are 9.4:1 against white, so this is
      taste, not contrast \u2014 and the mark, the logo and the app icon are all
      blue-teal, so the app should match them.

   2. Amber as a FILL returns to #f0a500, because amber means "act now" and a
      dark ochre ring does not carry urgency.

      Amber as TEXT stays HIS \u2014 #f0a500 on white is 2.08:1, which fails for
      text, and his #9a650d is 4.95:1 and passes. He was right and the old
      stylesheet was wrong. That distinction is the whole reason this file
      separates fills from type.

   3. Weather animation returns. He switched it off globally; the request was
      for drizzle, thunder and sun to be visible. It stays off for anyone whose
      phone asks for reduced motion \u2014 his rule for that is untouched and still
      wins, because it comes later in the cascade with !important.

   4. The night sky returns behind the moon, so a 3D-shaded moon has something
      to be lit against rather than sitting on a flat slab.
   ============================================================================ */

:root{
  /* aqua, not agriculture */
  --teal:#0e4d5c; --teal-dk:#093843; --teal-lt:#eaf4f6;
  --ink:#12262b; --mut:#47585d; --line:#c9dade; --bg:#f4f8f9;
  --green:#1e7d46; --green-lt:#e7f5ed;
  --red:#c0392b;  --red-lt:#fdecea;
  --blue:#285d73; --blue-lt:#edf3f6;

  /* amber, split by job */
  --amber:#f0a500;        /* fills, bars, rings \u2014 must catch the eye */
  --amber-ink:#9a650d;    /* type \u2014 must be readable (his value, 4.95:1) */
  --amber-lt:#fff6e0;
}

/* Any amber used as TEXT takes the readable one. */
.menu-row.warn .mt b,
.ob-badge.offline,
.cal-cell.key .cal-t,
.note-amber b,
.use-bar i.full + *,
.plan-hero.lapsed .plan-lab{ color:var(--amber-ink); }

/* Amber used as a FILL or an edge takes the bright one, where contrast rules
   do not apply because it is not carrying words. */
.menu-row.warn{ border-left:3px solid var(--amber); background:var(--amber-lt); }
.use-bar i.full{ background:var(--amber); }
.cal-cell.key{ background:#fff6e0; outline:1.5px solid var(--amber); }
.doc-fill.late{ background:var(--amber); }

/* The hero gets its depth back: a flat slab gives no sense of which figure
   matters most, which was the point of putting one number on it. */
.hero,.plan-hero{
  background:linear-gradient(150deg,var(--teal) 0%,var(--teal-dk) 100%);
  box-shadow:0 4px 18px rgba(14,77,92,.22);
}
.plan-hero.lapsed{ background:linear-gradient(150deg,#8a5a00 0%,#5e3d00 100%); }
.hero-split{ border-color:rgba(255,255,255,.22); }

/* Night behind the moon. */
.mini-card.moon{
  background:linear-gradient(165deg,#1c4254 0%,#0a1d26 100%);
  color:#ffe9a8;
}
.mini-card.moon .mini-head{ color:#cfe0e6; }
.moon-hero{ background:linear-gradient(165deg,#1c4254 0%,#0a1d26 100%); color:#ffe9a8; }
.moon-hero .moon-name,.cal-big-name{ color:#ffd97a; }

/* Weather: the sky moves again. */
.wx-fx *{ animation-play-state:running; }
.boot-dots i{ animation:bootPulse 1s ease-in-out infinite; }

/* His reduced-motion rule is later in the cascade and uses !important, so it
   still overrides all of the above for anyone who has asked for stillness.
   This block is here only to say so out loud \u2014 it changes nothing. */
@media (prefers-reduced-motion:reduce){
  .wx-fx *,.boot-dots i{ animation:none !important; }
}

/* ============================================================================
   Compact screens (v80)
   Guidance text is set small so the form itself fits on a phone screen.
   11.5px stays readable; labels, inputs and buttons keep their full size.
   ============================================================================ */
.hint,.note,.fine,.note-tight,.cat-lab,.check-row em,.pay-box .hint{
  font-size:11.5px; line-height:1.4;
}
.hint{ margin-top:3px; }
.note{ padding:8px 11px; }
.note-tight{ margin-bottom:10px; }
.cat-wrap{ margin-bottom:10px; }
.cat-lab{ margin-bottom:6px; font-weight:600; color:var(--mut); }
.cat-grid{ gap:7px; }
.cat-tile{ min-height:52px; font-size:13px; padding:8px 6px; }
.terms-doc .hint{ font-size:14px; line-height:1.7; }

/* ============================================================================
   Motion (v80): ponds ripple, crops swim, spending tiles pop.
   All of it is switched off for anyone whose phone asks for reduced motion.
   ============================================================================ */
@keyframes abRise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes abWave{ from{ background-position:0 0; } to{ background-position:120px 0; } }
@keyframes abSwim{ 0%,100%{ transform:translateX(0) rotate(0); } 50%{ transform:translateX(3px) rotate(-6deg); } }
@keyframes abPop{ 0%{ transform:scale(.92); } 60%{ transform:scale(1.04); } 100%{ transform:scale(1); } }
@keyframes abBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

.pond-card,.crop-card{ animation:abRise .38s ease-out both; }
.pond-card:nth-of-type(2),.crop-card:nth-of-type(2){ animation-delay:.05s; }
.pond-card:nth-of-type(3),.crop-card:nth-of-type(3){ animation-delay:.1s; }
.pond-card:nth-of-type(4),.crop-card:nth-of-type(4){ animation-delay:.15s; }
.pond-card:nth-of-type(n+5),.crop-card:nth-of-type(n+5){ animation-delay:.2s; }

/* A pond card carries a slow water line along its foot. */
.pond-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(14,77,92,.0) 0,rgba(14,77,92,.22) 30px,rgba(14,77,92,0) 60px);
  background-size:120px 5px; animation:abWave 3.2s linear infinite;
}
.pond-card.run::after{
  background:repeating-linear-gradient(90deg,rgba(30,125,70,0) 0,rgba(30,125,70,.32) 30px,rgba(30,125,70,0) 60px);
  background-size:120px 5px;
}
/* A pond with a crop in it breathes; its water icon bobs. */
.pond-card.run .ccard-ico{ animation:abBob 2.8s ease-in-out infinite; }
/* A running crop's animal swims gently. */
.crop-card.run .ccard-ico{ display:inline-block; animation:abSwim 2.6s ease-in-out infinite; }
.crop-card.prep .ccard-ico{ animation:abBob 2.4s ease-in-out infinite; }

/* Spending tiles arrive one after another; the chosen one pops. */
.cat-tile{ animation:abRise .3s ease-out both; animation-delay:calc(var(--i,0) * 40ms);
  transition:background-color .15s,border-color .15s,transform .1s; }
.cat-tile:active{ transform:scale(.96); }
.cat-tile.on{ animation:abPop .28s ease-out both; }
.cat-tile.on .cat-ico{ display:inline-block; animation:abBob 1.8s ease-in-out infinite; }
#entryCard{ animation:abRise .3s ease-out both; }

@media (prefers-reduced-motion:reduce){
  .pond-card,.crop-card,.pond-card::after,.pond-card .ccard-ico,.crop-card .ccard-ico,.cat-tile,.cat-tile.on,
  .cat-tile .cat-ico,#entryCard{ animation:none !important; }
}