/* =========================================================================
   Traxy — tactile depth layer (depth.css)
   Coherent raised / lift / press treatment for interactive controls.
   Pairs with depth.js (delegated press physics + high-tier tilt engine).

   - Tier-aware: the unprefixed rules ARE the 'medium' look. The tier script's
     catch path can omit html[data-tier] entirely, so absence of the attribute
     must look like medium — therefore html[data-tier='low'] only OVERRIDES
     downward (single-layer shadow, no hover lift, no box-shadow transitions)
     and html[data-tier='high'] layers richness on top with its own
     hover/press shadow states (same specificity, later in file).
   - Theme-aware: only the --tx-depth-* custom properties are tinted per
     atmosphere (shadows, never surface recolors), so atmospheres.css keeps
     full ownership of theme intent. Element-local tints derive from existing
     vars where available (e.g. --tracker-dialog-accent).
   - .tracker-card and its descendants NEVER receive transforms from this
     file (shadow-only there): tracker cards contain position:fixed popovers
     and a transformed ancestor becomes their containing block (documented in
     motion.css ~79-82). Every transform rule below carries
     :where(:not(.tracker-card *)) — zero-specificity guard.
   - Specificity convention: state guards live inside :where(...) so tier
     overrides (html[data-tier=...] prefix) reliably win, and same-block
     states resolve by source order (base → hover → press).

   Canonical selector lists:
     SOLID (raised at rest): .tracker-week-nav, .tracker-dialog__button,
       button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
       .panel-error button
     LIFT (hover lift + press; SOLID plus transparent controls):
       SOLID + .pill-nav-trigger, .dashboard-link
       (.pill-nav-trigger and .dashboard-link are transparent at rest — a
       rest shadow under a transparent background reads as a smudge, so they
       get transforms + hover-only shadow instead; the active pill's shadow
       already comes from var(--dashboard-pill-highlight-shadow) on the
       .pill-nav-highlight span.)
   ========================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --tx-press-scale: 0.965;
  --tx-lift-y: -1.5px;
  --tx-press-y: 1px;
  --tx-depth-shadow-color: rgba(15, 23, 42, 0.18);
  --tx-depth-highlight: rgba(255, 255, 255, 0.25);
  /* Focus token: sky-700 reaches ~5.5:1 on white chrome (sky-400 was ~2:1).
     motion.css:17 and --tx-depth-ring below consume it via their var() chains;
     dark surfaces counter-scope it back to a light ring (see .tracker-card). */
  --tx-focus: #0369a1;
  --tx-depth-ring: var(--tx-focus, #38bdf8);
  --tx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* release */
  --tx-ease-press: ease-out;
  --tx-dur-release: 0.26s;
  --tx-dur-press: 90ms;
}

/* ── Per-atmosphere shadow tints (only our own vars; subtle, not recolors) ── */
body[data-atmosphere="kitty_kat"] {
  --tx-depth-shadow-color: rgba(251, 113, 133, 0.26); /* rose */
  --tx-depth-highlight: rgba(255, 255, 255, 0.55);
}
body[data-atmosphere="fighter"] {
  --tx-depth-shadow-color: rgba(249, 115, 22, 0.3); /* ember — matches fighter's orange/red accents */
  --tx-depth-highlight: rgba(255, 255, 255, 0.12);
}
body[data-atmosphere="temporal"] {
  --tx-depth-shadow-color: rgba(56, 189, 248, 0.24); /* sky */
  --tx-depth-highlight: rgba(255, 255, 255, 0.14);
}
body[data-atmosphere="temporal"][data-temporal-mode="light"] {
  --tx-depth-shadow-color: rgba(14, 165, 233, 0.2);
  --tx-depth-highlight: rgba(255, 255, 255, 0.55);
}
body[data-atmosphere="folksy"] {
  --tx-depth-shadow-color: rgba(180, 124, 31, 0.24); /* warm amber */
  --tx-depth-highlight: rgba(255, 250, 240, 0.6);
}
body[data-atmosphere="traxyz"] {
  --tx-depth-shadow-color: rgba(16, 185, 129, 0.22); /* emerald */
  --tx-depth-highlight: rgba(255, 255, 255, 0.5);
}

/* ── Element-local tints from existing context ──────────────────────────── */
/* Dialog buttons follow the dialog accent (themed per atmosphere already). */
.tracker-dialog__button--primary {
  --tx-depth-shadow-color: rgba(56, 189, 248, 0.3); /* fallback for no color-mix */
  --tx-depth-shadow-color: color-mix(in srgb, var(--tracker-dialog-accent, #38bdf8) 32%, transparent);
}
/* Dark glass week-nav buttons sit on dark cards — keep a deep neutral. */
.tracker-week-nav {
  --tx-depth-shadow-color: rgba(2, 6, 23, 0.45);
}
/* Dark-glass tracker cards: sky-700 drops to ~3.2:1 there — counter-scope the
   focus token to sky-300. Property-only override; never transforms here. */
.tracker-card {
  --tx-focus: #7dd3fc;
}
/* Homepage CTAs are sky-colored surfaces; shadow follows the surface
   (matches their existing Tailwind shadow-sky-600/30). */
a[class*="rounded"][class*="bg-sky"] {
  --tx-depth-shadow-color: rgba(14, 165, 233, 0.32);
}

/* ── Raised treatment (medium default) ──────────────────────────────────── */
:is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"], .tx-btn-3d,
    a[class*="rounded"][class*="bg-sky"], .panel-error button) {
  box-shadow:
    0 1px 2px var(--tx-depth-shadow-color),                /* contact */
    0 7px 18px -7px var(--tx-depth-shadow-color),          /* ambient */
    inset 0 1px 0 var(--tx-depth-highlight);               /* top highlight */
  transition:
    transform var(--tx-dur-release) var(--tx-ease-spring),
    box-shadow 0.25s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

/* Transparent controls: springy transform transition, shadow only on hover. */
:is(a, button).pill-nav-trigger {
  transition:
    color 0.2s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform var(--tx-dur-release) var(--tx-ease-spring);
}
a.dashboard-link {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease,
    transform var(--tx-dur-release) var(--tx-ease-spring);
}

/* Hover — deepen shadow (lift) */
:is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"], .tx-btn-3d,
    a[class*="rounded"][class*="bg-sky"], .panel-error button):hover:where(:not(:disabled):not([aria-disabled="true"])) {
  box-shadow:
    0 2px 4px var(--tx-depth-shadow-color),
    0 14px 28px -10px var(--tx-depth-shadow-color),
    inset 0 1px 0 var(--tx-depth-highlight);
}
.dashboard-link:hover:where(:not(.tracker-card *)) {
  box-shadow:
    0 1px 2px var(--tx-depth-shadow-color),
    0 10px 22px -10px var(--tx-depth-shadow-color);
}

/* Hover — lift transform (forbidden inside .tracker-card: fixed popovers) */
:is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
    button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):hover:where(:not(:disabled):not([aria-disabled="true"]):not(.tracker-card *)) {
  transform: translateY(var(--tx-lift-y));
}

/* Press — :active plus the JS-driven .tx-pressed (depth.js adds it so child
   click targets still compress the whole control). Placed after hover so it
   wins while both states apply. */
:is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
    button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):is(:active, .tx-pressed):where(:not(:disabled):not([aria-disabled="true"])) {
  transition:
    transform var(--tx-dur-press) var(--tx-ease-press),
    box-shadow var(--tx-dur-press) var(--tx-ease-press);
}
:is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"], .tx-btn-3d,
    a[class*="rounded"][class*="bg-sky"], .panel-error button):is(:active, .tx-pressed):where(:not(:disabled):not([aria-disabled="true"])) {
  box-shadow:
    0 1px 1px var(--tx-depth-shadow-color),
    0 3px 8px -4px var(--tx-depth-shadow-color),
    inset 0 1px 0 var(--tx-depth-highlight);
}
:is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
    button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):is(:active, .tx-pressed):where(:not(:disabled):not([aria-disabled="true"]):not(.tracker-card *)) {
  transform: translateY(var(--tx-press-y)) scale(var(--tx-press-scale));
}

/* ── Low tier — overrides only (default above = medium; attribute may be
      absent and must read as medium). Single-layer shadow, static across
      states (no box-shadow repaint churn), no hover lift, no transform /
      box-shadow transitions. Press transform still applies but lands
      instantly (transition list excludes transform). ─────────────────────── */
html[data-tier="low"] :is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button,
    .dashboard-link, button[type="submit"], .tx-btn-3d,
    a[class*="rounded"][class*="bg-sky"], .panel-error button) {
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
html[data-tier="low"] :is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"],
    .tx-btn-3d, a[class*="rounded"][class*="bg-sky"], .panel-error button) {
  box-shadow: 0 3px 10px -2px var(--tx-depth-shadow-color);
}
html[data-tier="low"] :is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"],
    .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):where(:hover, :active, .tx-pressed) {
  box-shadow: 0 3px 10px -2px var(--tx-depth-shadow-color);
}
html[data-tier="low"] :is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button,
    .dashboard-link, button[type="submit"], .tx-btn-3d,
    a[class*="rounded"][class*="bg-sky"], .panel-error button):where(:hover) {
  transform: none;
}
html[data-tier="low"] .dashboard-link:where(:hover) {
  box-shadow: none;
}
/* Journal editor toolbar controls (styled in tailwind.src.css): low tier drops
   their transitions and hover lift, mirroring the pattern above. Deliberately
   NOT added to the SOLID/LIFT lists — that would pull in press physics and
   spring transforms they were never designed for. Static box-shadows stay. */
html[data-tier="low"] :is(.journal-toolbar-btn, .journal-format-chip,
    .journal-format-pill, .journal-mode-btn) {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
html[data-tier="low"] :is(.journal-toolbar-btn, .journal-format-chip,
    .journal-format-pill, .journal-mode-btn):where(:hover) {
  transform: none;
}

/* ── High tier — richer three-layer shadows + specular on the active pill.
      Needs its own hover/press states: these (0,3,2) rules outrank the
      medium (0,3,1) states, so order within this block resolves them. ────── */
html[data-tier="high"] :is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"],
    .tx-btn-3d, a[class*="rounded"][class*="bg-sky"], .panel-error button) {
  box-shadow:
    0 1px 2px var(--tx-depth-shadow-color),
    0 8px 20px -8px var(--tx-depth-shadow-color),
    0 22px 44px -20px var(--tx-depth-shadow-color),
    inset 0 1px 0 var(--tx-depth-highlight);
}
html[data-tier="high"] :is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"],
    .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):where(:hover):where(:not(:disabled):not([aria-disabled="true"])) {
  box-shadow:
    0 2px 4px var(--tx-depth-shadow-color),
    0 14px 30px -10px var(--tx-depth-shadow-color),
    0 30px 60px -24px var(--tx-depth-shadow-color),
    inset 0 1px 0 var(--tx-depth-highlight);
}
html[data-tier="high"] :is(.tracker-week-nav, .tracker-dialog__button, button[type="submit"],
    .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button):where(:active, .tx-pressed) {
  box-shadow:
    0 1px 1px var(--tx-depth-shadow-color),
    0 4px 10px -4px var(--tx-depth-shadow-color),
    inset 0 1px 0 var(--tx-depth-highlight);
}
/* Specular sheen over the active pill gradient (the trigger is z-index 2 and
   overflow hidden; the gradient itself lives on the .pill-nav-highlight span
   behind it, with var(--dashboard-pill-highlight-shadow) as its shadow). */
html[data-tier="high"] .pill-nav-trigger.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 38%, transparent 62%);
  pointer-events: none;
}

/* ── Focus-visible — consistent visible ring; zero-specificity so richer
      existing rings (e.g. --dashboard-pill-focus-ring) keep winning. Never
      removes an outline without replacement. ──────────────────────────────── */
:where(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
    button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
    .panel-error button, [data-tx-tilt]):focus-visible {
  outline: 2px solid var(--tx-depth-ring, var(--tx-focus, #38bdf8));
  outline-offset: 2px;
}

/* ── Tilt (high tier only; depth.js writes --tx-rx/--tx-ry, caps the angle).
      transform-style stays flat on purpose (no preserve-3d stacking
      surprises). Opt-in only: never tag [data-tx-tilt] on any ancestor of
      position:fixed content — the transform becomes its containing block. ── */
html[data-tier="high"] .tx-tilt {
  perspective: 800px; /* parent stage; depth.js adds this class above .pill-nav */
}
/* :where keeps this at (0,1,1) so existing transforms/transitions outrank it
   (e.g. [data-finance-nav-shell].is-deferred .pill-nav's translateY(6px) and
   its 0.3s opacity fade-in must keep winning; tilt then rides that element's
   own transform transition instead). */
html[data-tier="high"] :where([data-tx-tilt]) {
  transform: rotateX(var(--tx-rx, 0deg)) rotateY(var(--tx-ry, 0deg));
  transform-style: flat;
  transition: transform 0.18s ease-out;
}

/* ── Reduced motion — strip every transition this file introduces (static
      depth stays; state changes land instantly) and flatten the tilt rig.
      Kill-switch convention note (see atmospheres.css "Reduced-motion
      safety" guard): depth.css introduces NO decorative keyframe animations,
      only interaction transitions on these selectors — .pill-nav-trigger,
      .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
      button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
      .panel-error button, [data-tx-tilt] — so they are guarded here rather
      than added to the atmospheres.css animation kill-switch. depth.js keeps
      its press handler under this preference (A3: feedback must not vanish) —
      .tx-pressed/:active still compress, but with transition:none they land
      instantly (a state change, not an animation); only tilt vars are skipped. ── */
@media (prefers-reduced-motion: reduce) {
  :is(.pill-nav-trigger, .tracker-week-nav, .tracker-dialog__button, .dashboard-link,
      button[type="submit"], .tx-btn-3d, a[class*="rounded"][class*="bg-sky"],
      .panel-error button) {
    transition: none;
  }
  [data-tx-tilt] {
    transition: none;
    transform: none !important;
  }
  .tx-tilt {
    perspective: none;
  }
}