/*
 * V1-MICRO-INTERACTIONS-1.0 — Premium-M5 (HYP-OPS-207, FINAL)
 *
 * Premium micro-interactions polish layer. CONSUMES the design tokens
 * from Premium-M2 (--p-*), the typography from Premium-M3, and lives
 * on top of the Premium-M4 cockpit chassis without duplicating any of
 * its rules.
 *
 * Premium discipline: invisible until you need it.
 *
 *   - Focus rings on every interactive primitive (button, input, a,
 *     [role="button"]). 2 px ring at 2 px offset, using the
 *     --p-shadow-focus pair from Premium-M2.
 *   - Loading skeleton via a single .p-skeleton class — no spinner,
 *     no "Loading…" body text shifted by JS, just a soft shimmering
 *     placeholder that aligns with whatever container it replaces.
 *   - Toast notifications via a single .p-toast class — fixed top-
 *     right, slide-in + auto-fade-out. NO Bootstrap toast clone.
 *   - Premium button micro-interaction: scale 1.02 + accent-shift on
 *     hover, with --p-dur-sm easing. Active state compresses to
 *     scale 0.99 for tactile press feedback.
 *   - Modal backdrop: backdrop-filter: blur(8 px) + scale-in animation
 *     on open. NO opacity-only fade-in.
 *   - prefers-reduced-motion: every transition / animation collapses
 *     to 0 ms (the Premium-M2 token already does this for durations;
 *     this file additionally drops animation-duration to 0 so
 *     keyframe-based motion respects the preference).
 *
 * Forbidden by construction:
 *   - NO parallax.
 *   - NO auto-playing video / GIF placeholders.
 *   - NO sound-on-event.
 *   - NO aggressive shake/wobble animations.
 *   - NO replacement of legacy class names; this file ships NEW
 *     class names prefixed `p-` so the existing surface keeps
 *     rendering until cards opt-in (which can happen in a future
 *     polish slice, owner-gated).
 */

/* ───────────────────────────────────────────────────────────────── */
/* FOCUS RINGS — premium, consistent, not browser-default              */
/* ───────────────────────────────────────────────────────────────── */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.cockpit1a-rail-link:focus-visible {
  outline: none;
  box-shadow: var(--p-shadow-focus);
  border-radius: var(--p-radius-sm);
  transition: box-shadow var(--p-dur-xs) var(--p-ease-sharp);
}

/* ───────────────────────────────────────────────────────────────── */
/* PREMIUM BUTTON micro-interaction — opt-in via .p-btn               */
/* ───────────────────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-space-2);
  padding: var(--p-space-2) var(--p-space-4);
  background: var(--p-ink-900);
  color: var(--p-paper-50);
  border: 0;
  border-radius: var(--p-radius-sm);
  font-family: var(--p-font-sans);
  font-size: var(--p-type-caption);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-tracking-normal);
  cursor: pointer;
  transition:
    transform        var(--p-dur-sm) var(--p-ease-emphasized),
    background-color var(--p-dur-sm) var(--p-ease-emphasized),
    box-shadow       var(--p-dur-sm) var(--p-ease-emphasized);
  will-change: transform;
}
.p-btn:hover {
  background: var(--p-accent-clinical);
  transform: scale(1.02);
  box-shadow: var(--p-shadow-1);
}
.p-btn:active {
  transform: scale(0.99);
  box-shadow: var(--p-shadow-0);
}
.p-btn--ghost {
  background: transparent;
  color: var(--p-ink-700);
  border: 1px solid var(--p-paper-300);
}
.p-btn--ghost:hover {
  background: var(--p-paper-100);
  border-color: var(--p-ink-500);
}
.p-btn[disabled],
.p-btn:disabled {
  opacity: .55;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────────────── */
/* LOADING SKELETON — soft shimmer, NO spinner                        */
/* ───────────────────────────────────────────────────────────────── */
.p-skeleton {
  display: block;
  background:
    linear-gradient(
      90deg,
      var(--p-paper-100) 0%,
      var(--p-paper-200) 50%,
      var(--p-paper-100) 100%
    );
  background-size: 200% 100%;
  border-radius: var(--p-radius-sm);
  animation: p-skel-shimmer 1400ms linear infinite;
  color: transparent;
  user-select: none;
}
@keyframes p-skel-shimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* ───────────────────────────────────────────────────────────────── */
/* TOAST — minimal, top-right, slide-in + auto-fade                    */
/* ───────────────────────────────────────────────────────────────── */
.p-toast-host {
  position: fixed;
  top: var(--p-space-5);
  right: var(--p-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--p-space-2);
  z-index: 1000;
  pointer-events: none;
}
.p-toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  padding: var(--p-space-3) var(--p-space-4);
  background: var(--p-ink-900);
  color: var(--p-paper-50);
  border-radius: var(--p-radius-md);
  box-shadow: var(--p-shadow-2);
  font-family: var(--p-font-sans);
  font-size: var(--p-type-caption);
  line-height: var(--p-line-snug);
  animation:
    p-toast-in   var(--p-dur-md) var(--p-ease-enter) forwards,
    p-toast-out  var(--p-dur-md) var(--p-ease-exit)  forwards 3.6s;
}
.p-toast--good { background: var(--p-accent-good);     color: #fff; }
.p-toast--warn { background: var(--p-accent-warn);     color: #fff; }
.p-toast--stop { background: var(--p-accent-stop);     color: #fff; }
@keyframes p-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes p-toast-out {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(16px); }
}

/* ───────────────────────────────────────────────────────────────── */
/* MODAL BACKDROP + scale-in — opt-in via .p-modal / .p-modal-backdrop */
/* ───────────────────────────────────────────────────────────────── */
.p-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,19,32, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: p-modal-back-in var(--p-dur-md) var(--p-ease-enter) forwards;
}
.p-modal {
  background: var(--p-paper-50);
  color: var(--p-ink-900);
  padding: var(--p-space-5);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-3);
  min-width: 320px;
  max-width: 540px;
  max-height: 84vh;
  overflow: auto;
  animation: p-modal-scale-in var(--p-dur-md) var(--p-ease-emphasized) forwards;
  transform-origin: center center;
}
@keyframes p-modal-back-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes p-modal-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ───────────────────────────────────────────────────────────────── */
/* FORM FIELD — animated underline on focus                            */
/* ───────────────────────────────────────────────────────────────── */
.p-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--p-space-1);
  margin: 0 0 var(--p-space-3) 0;
}
.p-field > label {
  font-size: var(--p-type-micro);
  letter-spacing: var(--p-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--p-weight-medium);
  color: var(--p-ink-500);
}
.p-field > input,
.p-field > select,
.p-field > textarea {
  font-family: var(--p-font-sans);
  font-size: var(--p-type-body);
  color: var(--p-ink-900);
  background: var(--p-paper-50);
  border: 0;
  border-bottom: 1px solid var(--p-paper-300);
  padding: var(--p-space-2) 0;
  transition: border-bottom-color var(--p-dur-sm) var(--p-ease-emphasized);
  outline: none;
}
.p-field > input:focus,
.p-field > select:focus,
.p-field > textarea:focus {
  border-bottom-color: var(--p-accent-clinical);
}

/* ───────────────────────────────────────────────────────────────── */
/* prefers-reduced-motion — neutralise keyframe animations too         */
/* ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .p-skeleton,
  .p-toast,
  .p-modal-backdrop,
  .p-modal {
    animation: none !important;
  }
  .p-btn {
    transition: background-color var(--p-dur-xs) var(--p-ease-sharp) !important;
  }
}