/* ==========================================================================
   PRIDE v0.39 — "native feel" override layer (native.css)
   Loaded AFTER approved.css. Everything is scoped under html.native-ui.
   Kill switch: localStorage 'pride.nativeUI' === 'off', URL ?native=off,
   or window.PRIDE_NATIVE_OFF() at runtime (see native.js).
   Deliberately NOT touched: ResultReveal (.rr-*), onboarding (.o2-*, .onb*),
   MyID / Final Card visuals (.id-*). No @layer. !important is used only
   where the base rules themselves use !important (pressed states, tabbar bg).
   v0.45 consolidation: tab-surface and sheet entrance animations are owned by
   interaction.css alone (the duplicates that lived here are deleted), and the
   tab-bar backdrop blur is owned by the base .tabbar rule in index.html.
   This layer keeps only: motion tokens, press feel, glass cards, tabular
   numbers, gauge transitions and the ambient glow.
   ========================================================================== */

/* ---- Motion tokens ---------------------------------------------------- */
html.native-ui {
  --spring: cubic-bezier(.34, 1.4, .4, 1);
  --spring-soft: cubic-bezier(.3, 1.25, .35, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-surface: 380ms;
  --dur-sheet: 440ms;
  --press-scale: .95;
  --press-scale-tab: .94;
  --gold-line: rgba(214, 179, 105, .22);
  --glass-bg: rgba(255, 255, 255, .045);
  --glass-shadow: 0 10px 28px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .055);
}
@supports (transition-timing-function: linear(0, .5 50%, 1)) {
  html.native-ui {
    /* True spring approximation (Safari 17.2+); cubic-bezier above is the fallback. */
    --spring: linear(0, .30 9%, .58 19%, .80 31%, .94 44%, 1.035 57%, 1.012 70%, .998 84%, 1);
  }
}

/* ---- Ambient gold glow (gradient only, no filter blur — cheap) ------- */
html.native-ui body {
  background-image: radial-gradient(ellipse 95% 46% at 50% -6%, rgba(214, 179, 105, .105), rgba(214, 179, 105, 0) 62%);
  background-repeat: no-repeat;
  /* v0.45: static, painted once at the top of the parent (body) — a
     viewport-fixed layer behind the scrollers forced a recomposite of the
     gradient on every scroll frame. */
  background-attachment: scroll;
  background-size: 100% 100vh;
}

/* ---- Tab surfaces / sheets: entrance animations live in interaction.css
   (single owner since v0.45: surface-in / sheet-enter, opacity/transform on
   the incoming element only). The spring tokens above still feed the press
   transitions below. ---------------------------------------------------- */

/* ---- Press effect: .95 (tabs .94), spring return ---------------------- */
/* Base .pressed rules in interaction.css use !important, so these must too.
   transform is safe here: .pressed targets buttons/tabs/CTAs only. */
html.native-ui button.pressed:not(:disabled),
html.native-ui [role="tab"].pressed,
html.native-ui [role="radio"].pressed {
  transform: scale(var(--press-scale)) !important;
  filter: brightness(.94);
}
html.native-ui .tab.pressed {
  transform: scale(var(--press-scale-tab)) !important;
  filter: brightness(.94);
}
html.native-ui .btn-primary.pressed:not(:disabled),
html.native-ui .o2-cta.pressed,
html.native-ui .ee-add.pressed,
html.native-ui .v29-start.pressed {
  transform: translateY(1px) scale(var(--press-scale)) !important;
  filter: brightness(.94);
}
/* Springy release for the interactive set (press-in stays snappy via base). */
html.native-ui .tab,
html.native-ui .icon-btn,
html.native-ui .btn-primary,
html.native-ui .btn-ghost,
html.native-ui .o2-cta,
html.native-ui .ee-add,
html.native-ui .v29-start {
  transition: transform 340ms var(--spring), background-color 150ms ease,
              filter 150ms ease, box-shadow 150ms ease;
}

/* ---- Tab bar: deeper translucency + blur, gold top border kept -------- */
/* refinement.css sets .tabbar background with !important, hence !important
   here (native.css loads later, so equal importance + order wins). */
html.native-ui .tabbar {
  background: linear-gradient(180deg, rgba(10, 15, 12, .55), rgba(4, 7, 5, .78)) !important;
  /* backdrop blur itself is declared once, on the base .tabbar rule */
}

/* ---- Glass cards (conservative list only) ----------------------------- */
/* Full glass: plain UI cards. */
html.native-ui .bt-card,
html.native-ui .rc-daycard {
  background: var(--glass-bg);
  border: 1px solid var(--gold-line);
  box-shadow: var(--glass-shadow);
}
/* Podium crest plates (.pd-card / .v30-pd-card) carry approved metallic
   artwork (gold/silver/bronze gradients + rank-colored borders), so they
   keep their background and border; only depth (shadow + top highlight)
   is added. See CHANGES_v039.md. */
html.native-ui .pd-card,
html.native-ui .v30-pd-card {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ---- Numbers: tabular figures (ResultReveal excluded) ----------------- */
html.native-ui [class*="num"]:not([class*="rr-"]),
html.native-ui [class*="asset"]:not([class*="rr-"]),
html.native-ui [class*="income"]:not([class*="rr-"]) {
  font-variant-numeric: tabular-nums;
}

/* ---- Progress / gauge: smooth fill ------------------------------------ */
html.native-ui [role="progressbar"],
html.native-ui [class*="progress"],
html.native-ui [class*="gauge"] {
  transition: width 900ms var(--ease-out);
}

/* ---- Reduced motion: the new layer goes quiet ------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.native-ui .tab,
  html.native-ui .icon-btn,
  html.native-ui .btn-primary,
  html.native-ui .btn-ghost,
  html.native-ui .o2-cta,
  html.native-ui .ee-add,
  html.native-ui .v29-start,
  html.native-ui [role="progressbar"],
  html.native-ui [class*="progress"],
  html.native-ui [class*="gauge"] {
    transition: none;
  }
}