/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Strong custom curves — the built-in CSS easings are too weak. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Caveat (SIL Open Font License 1.1), self-hosted like everything else here —
   the app has to render with no network, and a CDN font would leave a page in
   the fallback face out in the field. One variable file covers 400–700.
   Declared in this plain stylesheet rather than the Tailwind source so the
   url() stays a logical path for Propshaft to digest. */
@font-face {
  font-family: "Caveat";
  src: url("/assets/caveat-latin-0aa453d2.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* Latin only: it covers both locales, accents and inverted marks included. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Press feedback: every button/submit gives a subtle scale-down so the UI feels
   like it's listening. scale() also scales children (icons, text) proportionally.
   .card-btn is listed alongside the element selectors because half the buttons
   in the app are <a> or <label> hosts of that class, which none of the element
   selectors reach — and because a .card-btn's hover fade rides the same
   `transition` declaration, which has to be set here: an unlayered rule wins
   over the @layer components block where .card-btn itself is defined. */
button,
input[type="submit"],
[type="button"],
[role="button"] {
  transition: transform 160ms var(--ease-out);
}

.card-btn {
  transition: transform 160ms var(--ease-out),
              background-color 140ms var(--ease-out),
              color 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out);
}

button:active,
input[type="submit"]:active,
[type="button"]:active,
[role="button"]:active,
.card-btn:active {
  transform: scale(0.97);
}

/* Exception: attached .btn-group segments must not scale as a whole — it
   opens a seam at the joins. Their contents scale instead (see the
   .btn-group rules in tailwind/application.css). Lives here, unlayered,
   because the layered Tailwind components can't override the rule above. */
.btn-group > button:active,
.btn-group > [type="button"]:active,
.btn-group > [role="button"]:active,
.btn-group > .card-btn:active {
  transform: none;
}

/* Nor the Irrigation Center's week bars: a press scale on something the width
   of the page reads as its text jumping inward, not as a press. The chevron
   turning is their feedback. */
.irrigation-week-bar:active,
.irrigation-week-toggle:active {
  transform: none;
}

/* Menus (dropdown_controller / tabs) scale in from their trigger when shown.
   Toggling `hidden` flips display, so this enter animation plays on reveal;
   exit stays instant (fine for frequently-used menus). */
@keyframes menu-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

[data-dropdown-target="menu"]:not(.hidden) {
  animation: menu-in 150ms var(--ease-out);
}

/* Field-capacity grid: the cell value slides up while its column is hovered,
   making room for the % change (column_highlight_controller.js). */
.fc-val {
  display: inline-block;
  transition: transform 0.12s var(--ease-out);
}

.fc-val.is-lifted {
  transform: translateY(-4px);
}

/* Cross-document view transitions (opted into by the layout's view-transition
   meta). The paired elements — an irrigation set's row and the card that edits
   it — morph; everything else is the default crossfade. Faster than the 250ms
   default: this fires on ordinary navigation, and a page that takes a quarter
   second to settle reads as slow rather than smooth. */
::view-transition-group(*) {
  animation-duration: 180ms;
  animation-timing-function: var(--ease-out);
}

/* Respect reduced-motion: drop movement, keep opacity/comprehension cues. */
@media (prefers-reduced-motion: reduce) {
  /* The morph is movement. Crossfading the whole page is not, so the
     transition itself stays — only the animation of the paired groups goes. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms;
  }

  button:active,
  input[type="submit"]:active,
  [type="button"]:active,
  [role="button"]:active,
  .card-btn:active {
    transform: none;
  }

  [data-dropdown-target="menu"]:not(.hidden) {
    animation: none;
  }

  .fc-val.is-lifted {
    transform: none;
  }
}