/* ============================================================================
   ReimburseOS — ROS v3 · PREMIUM ELEVATION LAYER (design tokens + motion CSS)
   Pairs with assets/js/ros-v3-motion.js. Builds ON TOP of ros-motion.css and
   premium-motion (different attribute namespace: data-v3-*, .ros3-*), so v2
   pages keep working untouched while flagship pages opt in.

   RULES THIS FILE ENFORCES
   - Animation = transform + opacity ONLY. No layout-triggering properties.
   - Shadows/glows crossfade via pseudo-element opacity (compositor-safe).
   - Every reveal occupies its final space from first paint: zero layout shift.
   - prefers-reduced-motion: everything renders in its final, calm state.

   OPT-IN SURFACE (the page API)
     [data-v3-reveal]            spring reveal: up(default)|down|left|right|scale|rise-lg
     [data-v3-stagger]           parent: children cascade with spring delays
     [data-v3-magnetic]          spring-physics magnetic pull (JS-driven)
     [data-v3-gauge="712"]       RateScore arc gauge, arc + count in lockstep
     [data-v3-count="48200"]     premium count-up, exact final snap
     [data-v3-progress]          JS feeds --ros3-p (0..1) for scroll choreography
     .ros3-btn / .ros3-btn--ghost  flagship buttons (hover/focus/active designed)
     .ros3-card                  lift + colored ambient shadow on hover
     .ros3-skeleton              designed loading shimmer (transform-based)
     .ros3-empty                 designed empty state
     .ros3-divider               section transition hairline
     .ros3-num                   tabular numerals (no count-up width jitter)
   ========================================================================== */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────
   Inherit the live design system (--cc-*) where it exists; carry full
   fallbacks so this layer also stands alone on new flagship pages.        */
:root{
  /* color */
  --ros3-bg:        var(--cc-bg, #000000);
  --ros3-bg-raised: var(--cc-bg-raised, #0d0d0f);
  --ros3-bg-card:   var(--cc-bg-card, #141417);
  --ros3-fg:        var(--cc-fg, #d9d9d9);
  --ros3-fg-bright: var(--cc-fg-bright, #ffffff);
  --ros3-fg-muted:  var(--cc-fg-muted, #9a9a9a);
  --ros3-accent:    var(--cc-accent, #00D4FF);
  --ros3-accent-2:  #5EEAD4;
  --ros3-accent-3:  #818CF8;
  --ros3-accent-ink:var(--cc-accent-ink, #04121a);
  --ros3-good:      #14e09a;
  --ros3-warn:      #f5b642;
  --ros3-bad:       #ff6b7a;
  --ros3-border:    var(--cc-border, rgba(255,255,255,.12));
  --ros3-border-strong: var(--cc-border-strong, rgba(255,255,255,.24));

  /* type scale (IBM Plex system inherited from the design system) */
  --ros3-font:      var(--cc-font-body, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
  --ros3-mono:      var(--cc-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  --ros3-display:   clamp(2.9rem, 1.4rem + 5.6vw, 5rem);
  --ros3-h1:        var(--cc-h1, clamp(2.7rem, 1.3rem + 5.4vw, 4.6rem));
  --ros3-h2:        var(--cc-h2, clamp(2rem, 1.5rem + 2.2vw, 2.7rem));
  --ros3-h3:        var(--cc-h3, clamp(1.45rem, 1.2rem + 1vw, 1.8rem));
  --ros3-stat:      var(--cc-stat, clamp(2.4rem, 1.8rem + 2.6vw, 3rem));
  --ros3-text-lg:   1.18rem;
  --ros3-text:      1rem;
  --ros3-text-sm:   .875rem;
  --ros3-text-xs:   .78rem;

  /* spacing (8-base editorial rhythm) */
  --ros3-s1: .25rem;  --ros3-s2: .5rem;  --ros3-s3: .75rem; --ros3-s4: 1rem;
  --ros3-s5: 1.5rem;  --ros3-s6: 2rem;   --ros3-s7: 3rem;   --ros3-s8: 4rem;
  --ros3-s9: 6rem;    --ros3-s10: 8rem;
  --ros3-section: clamp(4rem, 2rem + 8vw, 9rem);

  /* radius */
  --ros3-r-sm: 8px; --ros3-r-md: 14px; --ros3-r-lg: 20px; --ros3-r-xl: 28px;
  --ros3-r-pill: 999px;

  /* shadow + glow (color-carrying ambient depth) */
  --ros3-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.6);
  --ros3-shadow-2: 0 2px 6px rgba(0,0,0,.55), 0 24px 48px -16px rgba(0,0,0,.7), 0 16px 60px -24px rgba(0,212,255,.18);
  --ros3-shadow-3: 0 4px 10px rgba(0,0,0,.6), 0 40px 80px -24px rgba(0,0,0,.8), 0 24px 90px -30px rgba(0,212,255,.28);
  --ros3-glow:     0 0 0 1px rgba(0,212,255,.25), 0 0 34px -6px rgba(0,212,255,.5);

  /* easing — the shared motion vocabulary, one voice everywhere */
  --ros3-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ros3-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ros3-spring:     cubic-bezier(.22, 1.28, .32, 1);   /* fallback overshoot */

  /* duration */
  --ros3-d-fast: .18s; --ros3-d-base: .32s; --ros3-d-slow: .6s;
  --ros3-d-reveal: .85s; --ros3-d-reveal-o: .55s;
}
/* true damped-spring curve where linear() is supported (3% overshoot, settles) */
@supports (transition-timing-function: linear(0, 1)) {
  :root{
    --ros3-spring: linear(0, 0.1794, 0.4914, 0.7541, 0.9198, 1.0014, 1.0291,
                          1.0298, 1.021, 1.0115, 1.0048, 1.001, 0.9994, 0.999,
                          0.9992, 0.9995, 1);
  }
}

/* ── 2. SPRING SCROLL REVEALS ─────────────────────────────────────────────
   Transform springs (subtle overshoot), opacity eases straight in (opacity
   must never overshoot past 1: that reads as flicker). --ros3-delay is set
   by the JS stagger engine. willchange is applied pre-reveal, lifted after. */
[data-v3-reveal]{
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    transform var(--ros3-d-reveal) var(--ros3-spring) var(--ros3-delay, 0s),
    opacity var(--ros3-d-reveal-o) var(--ros3-ease-out) var(--ros3-delay, 0s);
  will-change: transform, opacity;
}
[data-v3-reveal="down"]   { transform: translate3d(0, -34px, 0); }
[data-v3-reveal="left"]   { transform: translate3d(44px, 0, 0); }
[data-v3-reveal="right"]  { transform: translate3d(-44px, 0, 0); }
[data-v3-reveal="scale"]  { transform: scale(.94); }
[data-v3-reveal="rise-lg"]{ transform: translate3d(0, 72px, 0) scale(.985); }
[data-v3-reveal].is-in{
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── 3. FLAGSHIP BUTTONS ──────────────────────────────────────────────────
   Pair with [data-v3-magnetic] for the spring-physics pull. The sheen is a
   transform-driven gradient sweep; the glow crossfades via ::after opacity. */
.ros3-btn{
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.9em; border: 0; border-radius: var(--ros3-r-pill);
  font: 600 var(--ros3-text)/1 var(--ros3-font); letter-spacing: .01em;
  color: var(--ros3-accent-ink); background: var(--ros3-accent);
  cursor: pointer; text-decoration: none;
  transform: translateZ(0);
  transition: transform var(--ros3-d-base) var(--ros3-spring);
}
.ros3-btn::before{           /* sheen sweep */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .7s var(--ros3-ease-out);
}
.ros3-btn::after{            /* glow, crossfaded not repainted */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--ros3-glow);
  opacity: 0; transition: opacity var(--ros3-d-base) var(--ros3-ease-out);
}
.ros3-btn:hover::before, .ros3-btn:focus-visible::before{ transform: translateX(130%); }
.ros3-btn:hover::after,  .ros3-btn:focus-visible::after { opacity: 1; }
.ros3-btn:hover{ transform: translateZ(0) scale(1.03); }
.ros3-btn:active{ transform: translateZ(0) scale(.97); transition-duration: var(--ros3-d-fast); }
.ros3-btn:focus-visible{ outline: 2px solid var(--ros3-accent); outline-offset: 3px; }

.ros3-btn--ghost{
  background: transparent; color: var(--ros3-fg-bright);
  box-shadow: inset 0 0 0 1px var(--ros3-border-strong);
}
.ros3-btn--ghost::after{ box-shadow: inset 0 0 0 1px var(--ros3-accent), 0 0 28px -8px rgba(0,212,255,.45); }
.ros3-btn--ghost::before{ background: linear-gradient(115deg, transparent 32%, rgba(0,212,255,.22) 50%, transparent 68%); }

/* ── 4. CARDS — lift + colored ambient shadow (opacity crossfade) ───────── */
.ros3-card{
  position: relative; isolation: isolate;
  background: var(--ros3-bg-card);
  border: 1px solid var(--ros3-border);
  border-radius: var(--ros3-r-lg);
  box-shadow: var(--ros3-shadow-1);
  transform: translateZ(0);
  transition: transform var(--ros3-d-slow) var(--ros3-spring),
              border-color var(--ros3-d-base) var(--ros3-ease-out);
}
.ros3-card::after{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: var(--ros3-shadow-3);
  opacity: 0; transition: opacity var(--ros3-d-slow) var(--ros3-ease-out);
}
.ros3-card:hover{ transform: translateZ(0) translateY(-6px); border-color: rgba(0,212,255,.35); }
.ros3-card:hover::after{ opacity: 1; }
.ros3-card:focus-within{ border-color: rgba(0,212,255,.45); }

/* ── 5. RATESCORE ARC GAUGE (rendered by ros-v3-motion.js) ───────────────
   The hero object. Arc, head dot, and count-up are driven from ONE rAF
   timeline so they land on the same frame: no mid-animation mismatch.    */
.ros3-gauge{
  position: relative; display: inline-block; width: min(320px, 78vw);
  aspect-ratio: 1; /* reserves space pre-render: zero layout shift */
}
.ros3-gauge svg{ display: block; width: 100%; height: auto; overflow: visible; }
.ros3-gauge__center{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.ros3-gauge__num{
  font: 700 clamp(3rem, 2.2rem + 3vw, 4.2rem)/1 var(--ros3-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ros3-fg-bright); letter-spacing: -.02em;
}
.ros3-gauge__label{
  margin-top: var(--ros3-s2);
  font: 600 var(--ros3-text-xs)/1.3 var(--ros3-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ros3-fg-muted);
}
.ros3-gauge__grade{
  margin-top: var(--ros3-s2); padding: .3em .85em; border-radius: var(--ros3-r-pill);
  font: 700 var(--ros3-text-sm)/1 var(--ros3-font);
  opacity: 0; transform: scale(.8);
  transition: opacity var(--ros3-d-base) var(--ros3-ease-out),
              transform var(--ros3-d-base) var(--ros3-spring);
}
.ros3-gauge.is-done .ros3-gauge__grade{ opacity: 1; transform: scale(1); }
.ros3-gauge.is-done{ animation: ros3-gauge-land .5s var(--ros3-spring) 1; }
@keyframes ros3-gauge-land{
  0%{ transform: scale(1); } 40%{ transform: scale(1.018); } 100%{ transform: scale(1); }
}

/* ── 6. COUNT-UP NUMBERS ─────────────────────────────────────────────────── */
.ros3-num, [data-v3-count]{
  font-variant-numeric: tabular-nums;  /* fixed digit width: no jitter, no shift */
}

/* ── 7. SCROLL CHOREOGRAPHY HOOK ─────────────────────────────────────────
   JS sets --ros3-p (0 entering -> 1 leaving). Compose freely, e.g.:
     transform: translateY(calc((var(--ros3-p, .5) - .5) * -48px));        */
[data-v3-progress]{ will-change: transform; }
.ros3-parallax-soft{ transform: translate3d(0, calc((var(--ros3-p, .5) - .5) * -40px), 0); }
.ros3-parallax-deep{ transform: translate3d(0, calc((var(--ros3-p, .5) - .5) * -90px), 0); }

/* ── 8. SECTION TRANSITIONS ──────────────────────────────────────────────── */
[data-v3-section]{ padding-block: var(--ros3-section); }
.ros3-divider{
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.35) 38%,
              rgba(129,140,248,.3) 62%, transparent);
  opacity: .7;
}

/* ── 9. DESIGNED LOADING STATE (skeleton shimmer, transform-only) ────────── */
.ros3-skeleton{
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.06); border-radius: var(--ros3-r-sm);
  min-height: 1em; color: transparent !important; user-select: none;
}
.ros3-skeleton::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ros3-shimmer 1.6s var(--ros3-ease-inout) infinite;
}
@keyframes ros3-shimmer{ to{ transform: translateX(100%); } }

/* ── 10. DESIGNED EMPTY STATE ────────────────────────────────────────────── */
.ros3-empty{
  display: grid; place-items: center; gap: var(--ros3-s3);
  padding: var(--ros3-s8) var(--ros3-s5); text-align: center;
  border: 1px dashed var(--ros3-border-strong); border-radius: var(--ros3-r-lg);
  color: var(--ros3-fg-muted); font: 400 var(--ros3-text)/1.6 var(--ros3-font);
}
.ros3-empty b{ color: var(--ros3-fg-bright); font-weight: 600; }

/* ── 11. CROSS-DOCUMENT PAGE TRANSITION (progressive, Chromium) ──────────── */
@media not (prefers-reduced-motion: reduce){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation: ros3-vt-out .26s var(--ros3-ease-out) both; }
  ::view-transition-new(root){ animation: ros3-vt-in .42s var(--ros3-ease-out) both; }
}
@keyframes ros3-vt-out{ to{ opacity: 0; transform: translateY(-10px); } }
@keyframes ros3-vt-in{ from{ opacity: 0; transform: translateY(14px); } }

/* ── 12. REDUCED MOTION: everything lands in its final, calm state ───────── */
@media (prefers-reduced-motion: reduce){
  [data-v3-reveal]{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .ros3-btn, .ros3-btn::before, .ros3-btn::after,
  .ros3-card, .ros3-card::after,
  .ros3-gauge, .ros3-gauge__grade{ transition: none !important; animation: none !important; }
  .ros3-gauge__grade{ opacity: 1 !important; transform: none !important; }
  .ros3-skeleton::after{ animation: none !important; }
  .ros3-parallax-soft, .ros3-parallax-deep, [data-v3-magnetic]{ transform: none !important; }
}

/* ============================================================================
   ROS v3 · EXTENSION 13-18 (additive, 2026-06-11)
   New primitives ratified on /styleguide (the DS acceptance gate): badges,
   forms, toasts, designed error state, button disabled state. All selectors
   are net-new class names: existing pages cannot be affected. Same contract:
   animation = transform + opacity only, reduced-motion pair in §18.
   ========================================================================== */

/* ── 13. BADGES · status chips, tier labels, state markers ──────────────── */
.ros3-badge{
  display: inline-flex; align-items: center; gap: .55em;
  padding: .38em .85em; border-radius: var(--ros3-r-pill);
  font: 600 var(--ros3-text-xs)/1 var(--ros3-mono);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ros3-fg); background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--ros3-border);
}
.ros3-badge .d{
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.ros3-badge--accent{ color: var(--ros3-accent); background: rgba(0,212,255,.08);  box-shadow: inset 0 0 0 1px rgba(0,212,255,.35); }
.ros3-badge--good  { color: var(--ros3-good);   background: rgba(20,224,154,.08); box-shadow: inset 0 0 0 1px rgba(20,224,154,.35); }
.ros3-badge--warn  { color: var(--ros3-warn);   background: rgba(245,182,66,.08); box-shadow: inset 0 0 0 1px rgba(245,182,66,.35); }
.ros3-badge--bad   { color: var(--ros3-bad);    background: rgba(255,107,122,.08);box-shadow: inset 0 0 0 1px rgba(255,107,122,.35); }
/* solid fill = cyan surface, so ink is BLACK (accent-ink), never white */
.ros3-badge--solid { color: var(--ros3-accent-ink); background: var(--ros3-accent); box-shadow: none; }

/* ── 14. FORMS · field, label, input, hint + error/valid/disabled states ── */
.ros3-field{ display: grid; gap: var(--ros3-s2); text-align: left; }
.ros3-label{
  font: 600 var(--ros3-text-xs)/1.3 var(--ros3-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ros3-fg-muted);
}
.ros3-input{
  width: 100%; padding: .85em 1.05em; border-radius: var(--ros3-r-md);
  font: 500 var(--ros3-text)/1.4 var(--ros3-font);
  color: var(--ros3-fg-bright); background: rgba(255,255,255,.04);
  border: 1px solid var(--ros3-border); outline: none; appearance: none;
  transition: border-color var(--ros3-d-base) var(--ros3-ease-out),
              box-shadow var(--ros3-d-base) var(--ros3-ease-out),
              background-color var(--ros3-d-base) var(--ros3-ease-out);
}
.ros3-input::placeholder{ color: var(--ros3-fg-muted); opacity: .75; }
.ros3-input:hover:not(:disabled):not(:focus-visible){ border-color: var(--ros3-border-strong); }
.ros3-input:focus-visible{
  border-color: rgba(0,212,255,.6);
  box-shadow: 0 0 0 3px rgba(0,212,255,.16);
  background: rgba(255,255,255,.055);
}
.ros3-input:disabled{ opacity: .45; cursor: not-allowed; }
select.ros3-input{
  padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05em center;
}
textarea.ros3-input{ resize: vertical; min-height: 6em; }
.ros3-hint{
  min-height: 1.25em;  /* space reserved: state changes never shift layout */
  font: 500 var(--ros3-text-xs)/1.45 var(--ros3-font); color: var(--ros3-fg-muted);
}
.ros3-field.is-error .ros3-input{ border-color: rgba(255,107,122,.65); box-shadow: 0 0 0 3px rgba(255,107,122,.12); }
.ros3-field.is-error .ros3-hint { color: var(--ros3-bad); }
.ros3-field.is-valid .ros3-input{ border-color: rgba(20,224,154,.55); }
.ros3-field.is-valid .ros3-hint { color: var(--ros3-good); }
.ros3-field.is-shake{ animation: ros3-shake .42s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ros3-shake{
  10%,90%{ transform: translateX(-1px); } 20%,80%{ transform: translateX(2px); }
  30%,50%,70%{ transform: translateX(-3px); } 40%,60%{ transform: translateX(3px); }
}

/* ── 15. TOASTS · earn their space, exit cleanly (transform + opacity) ──── */
.ros3-toasts{
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: grid; gap: 10px; width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}
.ros3-toast{
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--ros3-r-md);
  background: rgba(13,13,15,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--ros3-border-strong); box-shadow: var(--ros3-shadow-2);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.98);
  transition: transform var(--ros3-d-slow) var(--ros3-spring),
              opacity var(--ros3-d-base) var(--ros3-ease-out);
}
.ros3-toast.is-in { opacity: 1; transform: none; }
.ros3-toast.is-out{ opacity: 0; transform: translate3d(14px, 0, 0) scale(.98); }
.ros3-toast__bar{ width: 3px; align-self: stretch; border-radius: 2px; flex: none; background: var(--ros3-accent); }
.ros3-toast--good .ros3-toast__bar{ background: var(--ros3-good); }
.ros3-toast--warn .ros3-toast__bar{ background: var(--ros3-warn); }
.ros3-toast--bad  .ros3-toast__bar{ background: var(--ros3-bad); }
.ros3-toast__title{ font: 600 var(--ros3-text-sm)/1.35 var(--ros3-font); color: var(--ros3-fg-bright); }
.ros3-toast__msg{ margin: 2px 0 0; font: 400 var(--ros3-text-xs)/1.5 var(--ros3-font); color: var(--ros3-fg-muted); }
.ros3-toast__x{
  margin-left: auto; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ros3-fg-muted); font: 400 14px/1 var(--ros3-font); padding: 2px;
  transition: color var(--ros3-d-fast) var(--ros3-ease-out);
}
.ros3-toast__x:hover, .ros3-toast__x:focus-visible{ color: var(--ros3-fg-bright); }
.ros3-toast__x:focus-visible{ outline: 2px solid var(--ros3-accent); outline-offset: 2px; border-radius: 4px; }

/* ── 16. DESIGNED ERROR STATE · helpful and human, never alarming ────────── */
.ros3-error{
  display: grid; place-items: center; gap: var(--ros3-s3);
  padding: var(--ros3-s7) var(--ros3-s5); text-align: center;
  border: 1px solid rgba(255,107,122,.35); border-radius: var(--ros3-r-lg);
  background: rgba(255,107,122,.05);
  color: var(--ros3-fg-muted); font: 400 var(--ros3-text)/1.6 var(--ros3-font);
}
.ros3-error b{ color: var(--ros3-fg-bright); font-weight: 600; }

/* ── 17. BUTTON DISABLED STATE · parked, desaturated, motion suppressed ──── */
.ros3-btn:disabled, .ros3-btn[aria-disabled="true"]{
  cursor: not-allowed; opacity: .42; filter: saturate(.3);
  transform: translateZ(0) !important;   /* no hover lift, no active press */
}
.ros3-btn:disabled::before, .ros3-btn:disabled::after,
.ros3-btn[aria-disabled="true"]::before, .ros3-btn[aria-disabled="true"]::after{ content: none; }
.ros3-btn[aria-disabled="true"]{ pointer-events: none; }  /* links only; real buttons use [disabled] */

/* ── 18. REDUCED MOTION pair for §13-17 ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .ros3-input, .ros3-toast, .ros3-toast__x{ transition: none !important; }
  .ros3-field.is-shake{ animation: none !important; }
}