/* ═══════════════════════════════════════════════════════════════════════
   native-ui.css - Atlas APP-ONLY design layer (8 Jul 2026)

   Every rule is scoped under html.native-app, the class native.js adds only
   inside the Capacitor shell. On the website this class never exists, so this
   whole stylesheet is inert - the web dashboard is byte-for-byte unchanged.

   It re-tunes the shared --atlas-* design tokens for a more native, frosted,
   iOS feel, so every card / header / text size across every screen moves
   together and stays consistent. Components already read the tokens, so a
   token change here cascades app-wide with no per-page edits.
   ═══════════════════════════════════════════════════════════════════════ */

html.native-app {
  /* Elevated frosted surfaces - cards read as distinct glass panels, not
     near-invisible washes. Borders a touch stronger for definition. */
  --atlas-surface-card:     rgba(255,255,255,0.055);
  --atlas-surface-nested:   rgba(255,255,255,0.040);
  --atlas-surface-hover:    rgba(255,255,255,0.090);
  --atlas-border:           rgba(255,255,255,0.10);
  --atlas-border-strong:    rgba(255,255,255,0.16);

  /* Native type runs bigger than web. 16px body is the iOS baseline (also
     stops Safari auto-zoom on inputs). Titles and displays scale up with it. */
  --atlas-font-display-xl-size:  34px;
  --atlas-font-display-lg-size:  26px;
  --atlas-font-display-md-size:  20px;
  --atlas-font-title-size:       17px;
  --atlas-font-body-size:        16px;
  --atlas-font-body-sm-size:     14px;
  --atlas-font-label-size:       12px;
  --atlas-font-caption-size:     12px;

  /* Slightly more generous rhythm so the bigger type has room to breathe. */
  --atlas-space-4: 18px;
  --atlas-space-5: 22px;
  --atlas-space-6: 26px;
}

/* ── Cards: one consistent frosted-glass treatment everywhere ─────────────
   Softer corners, real backdrop blur + saturation (the "glass" look), a
   hairline top highlight, and a soft drop shadow for depth. */
html.native-app .atlas-card {
  border-radius: 20px;
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 24px rgba(0,0,0,0.18);
}
html.native-app .atlas-card--hero   { border-radius: 24px; }
html.native-app .atlas-card--nested { border-radius: 14px; box-shadow: none; }

/* Consistent card titles: display-md weight/tracking on every card header. */
html.native-app .atlas-card-header h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── Gold accent: one canonical treatment (soft wash + left rule) for any
   card or block flagged .is-accent, so highlights read the same app-wide. ── */
html.native-app .atlas-card.is-accent,
html.native-app .atlas-accent-rule {
  border-left: 3px solid var(--atlas-gold);
  background:
    linear-gradient(90deg, var(--atlas-gold-soft) 0%, transparent 55%),
    var(--atlas-surface-card);
}

/* ── Page / section titles: tighter tracking for the iOS large-title feel.
   (Structural collapse-on-scroll is a later pass; this is the type polish.) ── */
html.native-app h1,
html.native-app h2 {
  letter-spacing: -0.02em;
}