/* Sansone OS skin — the shared motion layer: load-in values and the hover / press / focus states of
   everything clickable. skin-motion.js (same folder) documents the load-in behaviour; this file is the
   one place for the timing of every skin-on page. Change it here, never per page.

   Loaded only with the skin on (the Home and /deals frames, and app/layout.tsx when the cookie says ctox).
   Every interactive rule is scoped under :where(:root[data-skin-motion]), an attribute skin-motion.js sets while
   it runs and removes when the skin is switched off live — so a page with the skin off matches nothing
   here even if this sheet is still attached. Inside shadow roots (the Design-System-Final modules) the
   module adopts this same text with that scope removed (it is only adopted while the module runs).

   WHY THE SELECTORS ARE :where(...): a component's own hover rule (".ta-pill:hover", Tailwind's
   "hover:bg-…") outranks these, so a designed hover always wins; these only add the lift, shadow and
   tint where nothing more specific is set. Hover never changes size, padding or position: transforms,
   shadows, filters and colours only. */
:root, :host {
  --skin-motion-duration: 750ms;                 /* a chart's entrance: bars, lines, pies, count-ups */
  --skin-motion-quick: 220ms;                    /* the same chart redrawn (filter change, refresh) */
  --skin-motion-stagger: 40ms;                   /* between siblings; long lists are capped at 60% of duration */
  --skin-motion-ease: cubic-bezier(.2, .7, .2, 1); /* ease-out, no overshoot */

  --skin-hover-duration: 180ms;                  /* hover, press and focus */
  --skin-hover-ease: cubic-bezier(.2, .7, .2, 1);
  --skin-hover-lift: -1px;                       /* buttons and pills rise this far */
  --skin-hover-step: .95;                        /* colour step: brightness on hover */
  --skin-press-scale: .98;
  --skin-hover-shadow: 0 6px 14px -6px rgba(16, 24, 40, .32), 0 2px 4px -2px rgba(16, 24, 40, .12);
  --skin-hover-tint: inset 0 0 0 999px rgba(22, 58, 110, .045);   /* rows, cards, nav: a wash over their own background */
  --skin-hover-row-shadow: 0 4px 14px -8px rgba(16, 24, 40, .28);
  --skin-focus-glow: 0 0 0 3px rgba(22, 58, 110, .16), 0 4px 14px -2px rgba(22, 58, 110, .32);
}

/* ── at rest: what transitions, how fast ─────────────────────────────────────────────────────────── */
:where(:root[data-skin-motion]) :where(
  button, [role="button"], input[type="button"], input[type="submit"], select, summary,
  .ta-pill, .sh-btn, .btn, [data-action], [data-go], [data-href], [onclick], [role="link"], [role="tab"],
  tr, [role="row"], .ag-row, a[href]
) {
  transition-property: transform, box-shadow, filter, background-color, color, border-color, text-decoration-color, opacity;
  transition-duration: var(--skin-hover-duration);
  transition-timing-function: var(--skin-hover-ease);
}

/* ── rows and clickable cards / tiles: a tint and a soft shadow, never a lift ───────────────────── */
:where(:root[data-skin-motion]) :where(
  tr:has(a[href], [data-href], [data-go]), tr[data-href], [role="row"], .ag-row, [data-row-primary],
  [data-go], [data-href], [onclick], [role="link"],
  .sh-request, .sh-deadline-row, .tl-row, li:has(> a[href])
):hover {
  box-shadow: var(--skin-hover-tint), var(--skin-hover-row-shadow);
}
:where(:root[data-skin-motion]) :where([data-action]):not(:where(button, a, [role="button"], select)):hover {
  box-shadow: var(--skin-hover-tint), var(--skin-hover-row-shadow);
}

/* ── buttons, pills, dropdowns, calendar days, clickable chart segments: lift, shadow, colour step ── */
:where(:root[data-skin-motion]) :where(
  button, [role="button"], input[type="button"], input[type="submit"], select, summary, .ta-pill, .sh-btn, .btn, a.ta-pill
):not(:where(:disabled, [aria-disabled="true"])):hover {
  transform: translateY(var(--skin-hover-lift));
  box-shadow: var(--skin-hover-shadow);
  filter: brightness(var(--skin-hover-step));
}
:where(:root[data-skin-motion]) :where(
  button, [role="button"], input[type="button"], input[type="submit"], summary, .ta-pill, .sh-btn, .btn, a.ta-pill
):not(:where(:disabled, [aria-disabled="true"])):active {
  transform: scale(var(--skin-press-scale));
  box-shadow: none;
  transition-duration: 90ms;
}

/* ── rows drawn as buttons (a key-date row, an event card): still a row — tint and shadow, no lift ── */
:where(:root[data-skin-motion]) :where(
  tr, [role="row"], .ag-row, [data-row-primary], .sh-request, .sh-deadline-row, .tl-row, .ta-event, .ta-list-row
):not(:where(:disabled)):hover {
  transform: none;
  filter: none;
  box-shadow: var(--skin-hover-tint), var(--skin-hover-row-shadow);
}
:where(:root[data-skin-motion]) :where(tr, [role="row"], .ag-row, [data-row-primary], .sh-request, .sh-deadline-row, .tl-row, .ta-event, .ta-list-row):active {
  transform: none;
}

/* ── navigation items: a background wash fades in, no lift ──────────────────────────────────────── */
:where(:root[data-skin-motion]) :where(
  nav a, nav button, aside a, .sh-nav-item, .nav-row, .ta-nav-item, [class*="nav-item"], [role="tab"]
):not(:where(:disabled)):hover {
  transform: none;
  filter: none;
  box-shadow: var(--skin-hover-tint);
}
:where(:root[data-skin-motion]) :where(nav a, nav button, aside a, .sh-nav-item, .nav-row, .ta-nav-item, [class*="nav-item"], [role="tab"]):active {
  transform: none;
}

/* ── text links: the underline fades in ────────────────────────────────────────────────────────── */
:where(:root[data-skin-motion]) :where(a:not([class]), a.hover\:underline) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: .18em;
}
:where(:root[data-skin-motion]) :where(a:not([class]), a.hover\:underline):hover {
  text-decoration-color: currentColor;
}

/* ── keyboard focus: a deepened glow, never a blue box ─────────────────────────────────────────── */
:where(:root[data-skin-motion]) :where(
  a[href], button, select, summary, [role="button"], [role="tab"], [role="link"], [data-action], [data-go], .ta-pill, .sh-btn
):focus-visible {
  outline: none !important;
  box-shadow: var(--skin-focus-glow);
}

/* ── reduced motion: nothing moves on load (the module reads the 0ms) and hover is colour only ──── */
@media (prefers-reduced-motion: reduce) {
  :root, :host { --skin-motion-duration: 0ms; --skin-motion-quick: 0ms; --skin-hover-lift: 0px; --skin-press-scale: 1; }
}