/* Palarid · The interaction layer · v4.53.0
   ==========================================================================
   THE MEASUREMENT THAT PRODUCED THIS FILE

   852 of Palarid's buttons carry inline styles. Hover and press states were
   handled — but only for buttons whose inline style contained one of three
   specific strings ("linear-gradient", "rgba(255,255,255,.04)",
   "rgba(248,113,113,.1)"). That is a clever trick and a brittle one: it
   covers whatever was looked at on the day it was written.

   390 buttons — 45% — matched none of them and responded to nothing. Point
   at them: nothing. Press them: nothing. Among them are 163 primary accent
   buttons and 49 confirm buttons, which is to say the Add, Save and
   Calculate buttons across half the product. The single most important
   control on a tool's screen was the one that felt dead.

   HOW THIS AVOIDS FIGHTING 4,299 INLINE DECLARATIONS

   Inline styles win, but only for the properties they actually declare.
   Measured across all 852: `background`, `color` and `border` are declared
   on 98%. But `filter`, `transform`, `opacity` and `will-change` are
   declared on **zero**, and `box-shadow` on three.

   So the entire interaction language is built from properties that are free.
   Nothing here can be overridden by a tool's own styling, and nothing here
   overrides a tool's own colour. No markup was edited to achieve it.

   THE FEEL BEING AIMED AT

   Physical, quick, and quiet. A control lifts a fraction and brightens when
   you point at it; it presses down and dims very slightly when you click. The
   timings are short enough to read as response rather than animation — 120ms
   in, 90ms out, because a press must feel instant while a release can settle.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   1 · THE TRANSITION
   Only the free properties are transitioned. Putting `all` here would animate
   a tool's own background changes as a side effect, which is how a snappy
   interface turns into a laggy one.
   ══════════════════════════════════════════════════════════════════════════ */
.panel-pane button,
.panel-pane [role="button"],
.panel-pane summary,
.panel-pane label[for] {
  transition:
    filter 120ms cubic-bezier(.2, .7, .3, 1),
    transform 120ms cubic-bezier(.2, .7, .3, 1),
    box-shadow 140ms cubic-bezier(.2, .7, .3, 1),
    opacity 120ms linear;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · HOVER — the 45% that did nothing
   `brightness` works on any background a tool might have declared: an accent
   fill, a semi-transparent tint, a gradient. It needs no knowledge of the
   colour, which is exactly why it survives 2,219 distinct inline styles.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .panel-pane button:not(:disabled):not([aria-disabled="true"]):hover,
  .panel-pane [role="button"]:not([aria-disabled="true"]):hover {
    filter: brightness(1.09) saturate(1.03);
    transform: translateY(-1px);
  }

  /* A transparent or barely-tinted button cannot be brightened — there is
     nothing there to brighten. An inset shadow paints a tint *inside* the
     control without touching `background`, which the tool owns. */
  .panel-pane button[style*="transparent"]:not(:disabled):hover,
  .panel-pane button:not([style*="background"]):not(:disabled):hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07);
    filter: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · PRESS — the part that makes it feel like a thing rather than a picture
   Applied on :active regardless of pointer type, because a touch user gets
   this feedback too and it is the only confirmation they receive before the
   result appears.
   ══════════════════════════════════════════════════════════════════════════ */
.panel-pane button:not(:disabled):active,
.panel-pane [role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(0) scale(.978);
  filter: brightness(.94);
  transition-duration: 40ms;          /* a press must feel instant */
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · DISABLED — it must LOOK unavailable, not merely refuse to work
   A button that is disabled but looks identical to an active one reads as a
   broken button. `opacity` and `cursor` are both free.
   ══════════════════════════════════════════════════════════════════════════ */
.panel-pane button:disabled,
.panel-pane button[aria-disabled="true"],
.panel-pane [role="button"][aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · FIELDS
   Inputs already get a focus ring. What they lacked was any response to being
   pointed at — a field that does not acknowledge the cursor reads as
   read-only. Border colour is declared inline on 77%, so this uses shadow,
   which is not.
   ══════════════════════════════════════════════════════════════════════════ */
.panel-pane input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.panel-pane select,
.panel-pane textarea {
  transition: box-shadow 130ms cubic-bezier(.2, .7, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .panel-pane input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(:focus):hover,
  .panel-pane select:not(:focus):hover,
  .panel-pane textarea:not(:focus):hover {
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .025);
  }
}

/* A field the guard has marked invalid should feel wrong to the hand as well
   as read wrong. Pairs with the inline message added in v4.50. */
.panel-pane [aria-invalid="true"] {
  box-shadow: 0 0 0 3px rgba(180, 83, 9, .18);
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · RESPECTING THE PERSON
   Reduced motion removes MOVEMENT, not feedback. Brightness and shadow are
   not motion, and stripping them would leave those users with the dead
   buttons this file exists to fix.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .panel-pane button:hover,
  .panel-pane button:active,
  .panel-pane [role="button"]:hover,
  .panel-pane [role="button"]:active {
    transform: none;
  }
  .panel-pane button,
  .panel-pane [role="button"] {
    transition-duration: 1ms;
  }
}

/* Forced-colours mode replaces every colour the app chose, so brightness and
   tint mean nothing. Fall back to the one thing the mode guarantees. */
@media (forced-colors: active) {
  .panel-pane button:hover,
  .panel-pane [role="button"]:hover { outline: 2px solid Highlight; outline-offset: 1px; }
  .panel-pane button:disabled { opacity: 1; }
}