/* ============================================================================
   ATLAS DESIGN SYSTEM — v3 "Atmosphere Glass"
   ----------------------------------------------------------------------------
   Canonical source of truth for every Atlas surface (client app, onboarding,
   coach cockpit). Approved by Harry 23 Jul 2026 against the 48-screen gallery
   (atlas-app-1..4 in the project folder — that gallery IS the visual spec).

   Rules this file enforces (do not work around them):
   1. FLATNESS   — no cards inside cards. Rows + dividers inside one card.
                   Section eyebrows sit on the background, never boxed.
   2. SPACING    — 20px gutters · 12px between cards · 32px between sections.
   3. ONE GOLD   — exactly one gradient element per screen (the primary CTA /
                   the A orb / the send orb). Gold is never a data or selected
                   state: selected = gold tint + gold border.
   4. TABS       — underline tabs = page views. Segmented pill = data filters.
   5. CHARTS     — data lines are --atl-chart only. Solid gold visuals are
                   reserved for the Atlas Score ring. Zone bands are TWO-region
                   tracks: optimal is one continuous glowing stretch.
   6. METRICS    — every metric card ships value + delta + sparkline; banded
                   metrics add the zone band. Every tappable metric shows a
                   chevron (▾ closed / ▴ open / › row).
   7. Z-SCALE    — layering uses the --atl-z-* tokens ONLY. No magic numbers.
   8. NO PRIVATE VALUES — feature styles consume these tokens. A new hex,
                   radius, shadow or z-index outside this file is a bug.

   Load order: after legacy stylesheets, before feature <style> blocks.
   During migration, legacy classes are re-pointed at these tokens; the
   primitives below are the canonical recipes they converge on.
   ========================================================================== */

:root {
  /* ---- color · ground ---- */
  --atl-bg:            #101514;
  --atl-atmosphere:
      radial-gradient(900px 480px at 12% -60px, rgba(79,163,165,0.13), rgba(0,0,0,0) 60%),
      radial-gradient(780px 520px at 92% 105%, rgba(212,178,106,0.08), rgba(0,0,0,0) 55%);

  /* ---- color · surfaces ---- */
  --atl-card:          rgba(30,40,39,0.52);
  --atl-nested:        rgba(255,255,255,0.045);   /* inputs, tiles, chips — NOT sub-cards */
  --atl-modal:         rgba(30,40,39,0.85);
  --atl-sheet:         rgba(24,32,31,0.92);
  --atl-tabbar:        rgba(26,35,34,0.66);
  --atl-tooltip:       rgba(34,44,43,0.95);
  --atl-scrim:         rgba(8,12,12,0.55);

  /* ---- color · lines ---- */
  --atl-border:        rgba(255,255,255,0.085);
  --atl-border-strong: rgba(255,255,255,0.15);
  --atl-divider:       rgba(255,255,255,0.06);

  /* ---- color · text ---- */
  --atl-text-hi:       #EEF3F1;
  --atl-text-body:     #BCC6C4;
  --atl-text-mut:      #8F9A98;

  /* ---- color · brand ---- */
  --atl-gold:          #D4B26A;
  --atl-gold-grad:     linear-gradient(135deg, #E9CB84, #C9A557);
  --atl-gold-tint:     rgba(212,178,106,0.15);
  --atl-gold-dim:      rgba(212,178,106,0.5);
  --atl-on-gold:       #171207;

  /* ---- color · status (+ matching-hue tints) ---- */
  --atl-up:            #6CD693;  --atl-up-tint:      rgba(108,214,147,0.14);
  --atl-watch:         #E8A857;  --atl-watch-tint:   rgba(232,168,87,0.14);
  --atl-concern:       #E88A8A;  --atl-concern-tint: rgba(232,138,138,0.14);
  --atl-info:          #8EC4D4;  --atl-info-tint:    rgba(142,196,212,0.14);
  --atl-purple:        #B3A0D4;  --atl-purple-tint:  rgba(179,160,212,0.14);

  /* ---- color · charts ---- */
  --atl-chart:         var(--atl-info);            /* ALL data lines/sparks   */
  --atl-chart-deep:    #5B9BB5;                     /* deep-sleep / 2nd series */
  --atl-opt-fill:      rgba(108,214,147,0.07);      /* optimal region shading  */
  --atl-opt-edge:      rgba(108,214,147,0.35);

  /* ---- color · cardio zone ramp (intensity scale — the one categorical ramp) */
  --atl-z1: #7FD1C8;  --atl-z2: #6CD693;  --atl-z3: #E8C97E;
  --atl-z4: #E8A857;  --atl-z5: #D85A30;

  /* ---- radius ---- */
  --atl-r-lg: 20px;    /* cards, sheets, modals, docks */
  --atl-r-md: 14px;    /* buttons, inputs, banners     */
  --atl-r-sm: 10px;    /* tiles, day cells, cue boxes  */
  --atl-r-xs: 8px;     /* set cells, mini squares      */
  --atl-r-pill: 999px;

  /* ---- spacing rhythm ---- */
  --atl-gutter: 20px;
  --atl-gap-card: 12px;
  --atl-gap-sect: 32px;
  --atl-pad-card: 18px;

  /* ---- type roles (system stack; SF Pro on iOS/macOS) ---- */
  --atl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --atl-fs-caption: 11px;    /* eyebrows · 600 · 0.08em · uppercase */
  --atl-fs-meta:    12px;    /* row subs, metas                      */
  --atl-fs-body:    13.5px;  /* prose, chat                          */
  --atl-fs-title:   14px;    /* row titles · 600                     */
  --atl-fs-h3:      15px;    /* card titles · 600                    */
  --atl-fs-h2:      17px;    /* takeover headers · 700               */
  --atl-fs-page:    24px;    /* page titles · 700 · -0.01em          */
  --atl-fs-stat:    22px;    /* trend-card values · 700 · tabular    */
  --atl-fs-display: 32px;    /* hero numbers · 700 · -0.02em         */
  --atl-input-fs:   16px;    /* NEVER below 16px — iOS auto-zoom     */

  /* ---- elevation ---- */
  --atl-shadow-card:  inset 0 1px 0 rgba(255,255,255,0.07), 0 18px 44px rgba(0,0,0,0.34);
  --atl-shadow-float: 0 24px 64px rgba(0,0,0,0.5);
  --atl-shadow-cta:   0 8px 26px rgba(212,178,106,0.28);

  /* ---- glass ---- */
  --atl-glass:        blur(18px) saturate(140%);   /* cards, sheets, docks */
  --atl-glass-scrim:  blur(4px);                    /* behind scrims        */

  /* ---- motion ---- */
  --atl-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --atl-dur-fast:  140ms;   /* presses, hovers, chip toggles */
  --atl-dur-med:   260ms;   /* accordions, sheet slides      */
  --atl-spin:      900ms;   /* loading arc                   */

  /* ---- z-scale (the ONLY layering values in the app) ---- */
  --atl-z-raise:    10;     /* in-card raised bits (tooltips within flow) */
  --atl-z-nav:     100;     /* tab bar, fixed headers                      */
  --atl-z-dock:    200;     /* concierge dock/pill                         */
  --atl-z-scrim:   300;     /* sheet + modal scrims                        */
  --atl-z-sheet:   310;     /* bottom sheets, modals                       */
  --atl-z-takeover:400;     /* live session / cardio full-screen           */
  --atl-z-toast:   500;     /* toasts — above everything                   */
}

/* ============================================================
   GROUND
   ============================================================ */
.atl-page {
  background: var(--atl-bg);
  background-image: var(--atl-atmosphere);
  color: var(--atl-text-body);
  font-family: var(--atl-font);
  -webkit-font-smoothing: antialiased;
  padding: 0 var(--atl-gutter);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); /* clears tab bar */
}
.atl-sect { margin-top: var(--atl-gap-sect); }
.atl-stack > * + * { margin-top: var(--atl-gap-card); }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.atl-eyebrow {
  font-size: var(--atl-fs-caption); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--atl-text-mut);
}
.atl-sect > .atl-eyebrow { display: block; margin-bottom: 12px; padding-left: 2px; } /* on background */
.atl-page-title { font-size: var(--atl-fs-page); font-weight: 700; letter-spacing: -0.01em; color: var(--atl-text-hi); }
.atl-display { font-size: var(--atl-fs-display); font-weight: 700; letter-spacing: -0.02em; color: var(--atl-text-hi); font-variant-numeric: tabular-nums; }
.atl-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   CARD — the one surface. Never nested inside another card.
   ============================================================ */
.atl-card {
  background: var(--atl-card);
  border: 1px solid var(--atl-border);
  border-radius: var(--atl-r-lg);
  padding: var(--atl-pad-card);
  box-shadow: var(--atl-shadow-card);
  backdrop-filter: var(--atl-glass);
  -webkit-backdrop-filter: var(--atl-glass);
}
.atl-card--gold    { border-left: 3px solid var(--atl-gold); }
.atl-card--up      { border-left: 3px solid var(--atl-up); }
.atl-card--concern { border-left: 3px solid var(--atl-concern); }
.atl-card--dashed  { border-style: dashed; border-color: rgba(212,178,106,0.4); }

/* rows: the ONLY hierarchy inside a card */
.atl-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--atl-divider); }
.atl-row:first-of-type { border-top: none; }
.atl-row-main  { flex: 1; min-width: 0; }
.atl-row-title { font-size: var(--atl-fs-title); font-weight: 600; color: var(--atl-text-hi); }
.atl-row-sub   { font-size: var(--atl-fs-meta); color: var(--atl-text-mut); margin-top: 2px; line-height: 1.5; }
.atl-chev { color: var(--atl-text-mut); opacity: 0.7; font-size: 14px; flex: none; }

/* kv detail rows (stack, tech, protocol drawers) */
.atl-kv { display: flex; gap: 10px; padding: 11px 0 0; margin-top: 11px; border-top: 1px solid var(--atl-divider); font-size: 12.5px; line-height: 1.55; }
.atl-kv > b { flex: none; width: 92px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--atl-text-mut); padding-top: 2px; overflow-wrap: break-word; hyphens: auto; }
.atl-kv > span { color: var(--atl-text-body); flex: 1; min-width: 0; }
.atl-kv .atl-gold-text { color: var(--atl-gold); }

/* ============================================================
   PILLS & CHIPS — status vocabulary
   ============================================================ */
.atl-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--atl-r-pill); font-size: 11px; font-weight: 600; padding: 3px 9px; letter-spacing: 0.02em; white-space: nowrap; }
.atl-pill--md { font-size: 12px; padding: 5px 12px; }
.atl-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.atl-pill--up      { color: var(--atl-up);      background: var(--atl-up-tint); }
.atl-pill--watch   { color: var(--atl-watch);   background: var(--atl-watch-tint); }
.atl-pill--concern { color: var(--atl-concern); background: var(--atl-concern-tint); }
.atl-pill--info    { color: var(--atl-info);    background: var(--atl-info-tint); }
.atl-pill--gold    { color: var(--atl-gold);    background: var(--atl-gold-tint); }   /* coach-sent / brand, NOT data */
.atl-pill--neutral { color: var(--atl-text-body); background: var(--atl-nested); border: 1px solid var(--atl-divider); }

/* ============================================================
   BUTTONS — one gradient per screen
   ============================================================ */
.atl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--atl-r-md); font-size: var(--atl-fs-title); font-weight: 600;
  padding: 12px 18px; min-height: 44px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; transition: transform var(--atl-dur-fast) var(--atl-ease), opacity var(--atl-dur-fast) var(--atl-ease); }
.atl-btn:active { transform: scale(0.98); }
.atl-btn--primary { background: var(--atl-gold-grad); color: var(--atl-on-gold); font-weight: 700; box-shadow: var(--atl-shadow-cta); }
.atl-btn--ghost   { background: transparent; color: var(--atl-text-hi); border-color: var(--atl-border-strong); }
.atl-btn--subtle  { background: var(--atl-nested); color: var(--atl-text-hi); border-color: var(--atl-divider); }
.atl-btn--danger  { background: transparent; color: var(--atl-concern); }
.atl-btn--block   { width: 100%; }
.atl-textlink  { font-size: 13px; font-weight: 600; color: var(--atl-gold); text-decoration: none; }
.atl-quietlink { font-size: 13px; font-weight: 600; color: var(--atl-text-mut); text-decoration: none; }

/* ============================================================
   NAV — underline tabs (views) vs segmented pill (filters)
   ============================================================ */
.atl-subtabs { display: flex; gap: 18px; border-bottom: 1px solid var(--atl-divider); }
.atl-subtabs > * { font-size: 13px; font-weight: 600; color: var(--atl-text-mut); padding: 0 2px 10px; background: none; border: none; font-family: inherit; }
.atl-subtabs > .on { color: var(--atl-text-hi); box-shadow: inset 0 -2px 0 var(--atl-gold); }

.atl-seg { display: inline-flex; background: var(--atl-nested); border: 1px solid var(--atl-divider); border-radius: var(--atl-r-pill); padding: 3px; gap: 2px; }
.atl-seg > * { font-size: 11px; font-weight: 600; color: var(--atl-text-mut); padding: 4px 11px; border-radius: var(--atl-r-pill); background: none; border: none; font-family: inherit; }
.atl-seg > .on { color: var(--atl-text-hi); background: var(--atl-card); border: 1px solid var(--atl-border); }

/* selected input state — gold tint, never solid gold */
.atl-choice { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.atl-choice > * { min-width: 32px; height: 32px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: var(--atl-text-mut); background: var(--atl-nested); border: 1px solid var(--atl-divider); font-family: inherit; }
.atl-choice > .on { color: var(--atl-gold); background: var(--atl-gold-tint); border-color: var(--atl-gold-dim); font-weight: 700; }

/* ============================================================
   FORMS
   ============================================================ */
.atl-field label { display: block; font-size: 12px; font-weight: 600; color: var(--atl-text-body); margin-bottom: 7px; }
.atl-input { width: 100%; background: var(--atl-nested); border: 1px solid var(--atl-border);
  border-radius: var(--atl-r-md); color: var(--atl-text-hi); font-size: var(--atl-input-fs);
  padding: 12px 14px; outline: none; font-family: inherit;
  transition: border-color var(--atl-dur-fast) var(--atl-ease), box-shadow var(--atl-dur-fast) var(--atl-ease); }
.atl-input::placeholder { color: var(--atl-text-mut); }
.atl-input:focus { border-color: var(--atl-gold-dim); box-shadow: 0 0 0 3px var(--atl-gold-tint); }
.atl-help { font-size: 11.5px; color: var(--atl-text-mut); margin-top: 6px; line-height: 1.5; }

/* ============================================================
   OVERLAYS — one scrim, one sheet, one modal, one toast
   ============================================================ */
.atl-scrim { position: fixed; inset: 0; background: var(--atl-scrim);
  backdrop-filter: var(--atl-glass-scrim); -webkit-backdrop-filter: var(--atl-glass-scrim);
  z-index: var(--atl-z-scrim); }

.atl-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; z-index: var(--atl-z-sheet);
  background: var(--atl-sheet); border: 1px solid var(--atl-border-strong); border-bottom: none;
  border-radius: 28px 28px 0 0; box-shadow: 0 -24px 64px rgba(0,0,0,0.5);
  backdrop-filter: var(--atl-glass); -webkit-backdrop-filter: var(--atl-glass);
  padding: 10px var(--atl-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; }
.atl-grab { width: 38px; height: 4px; border-radius: var(--atl-r-pill); background: var(--atl-border-strong); margin: 0 auto 18px; }

.atl-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 40px)); z-index: var(--atl-z-sheet);
  background: var(--atl-modal); border: 1px solid var(--atl-border-strong);
  border-radius: var(--atl-r-lg); padding: 22px; box-shadow: var(--atl-shadow-float);
  backdrop-filter: var(--atl-glass); -webkit-backdrop-filter: var(--atl-glass); }

.atl-toast { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: var(--atl-z-toast);
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--atl-modal); border: 1px solid var(--atl-border-strong);
  border-radius: var(--atl-r-md); box-shadow: var(--atl-shadow-float);
  padding: 11px 16px; font-size: 13px; font-weight: 500; color: var(--atl-text-hi);
  backdrop-filter: var(--atl-glass); -webkit-backdrop-filter: var(--atl-glass); }
/* toast: 3.5s auto-dismiss, aria-live="polite", never steals focus */

/* ============================================================
   TAB BAR + THE A ORB
   ============================================================ */
.atl-tabbar { position: fixed; left: 14px; right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: var(--atl-z-nav);
  display: flex; align-items: center; justify-content: space-around;
  background: var(--atl-tabbar); border: 1px solid var(--atl-border);
  border-radius: 26px; padding: 10px 6px 8px;
  backdrop-filter: var(--atl-glass); -webkit-backdrop-filter: var(--atl-glass);
  box-shadow: var(--atl-shadow-card); }
.atl-tab { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--atl-text-mut); min-width: 52px; }
.atl-tab svg { width: 20px; height: 20px; stroke: currentColor; }
.atl-tab.on { color: var(--atl-gold); }
.atl-orb { width: 40px; height: 40px; border-radius: 50%; background: var(--atl-gold-grad);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--atl-shadow-cta); }
.atl-orb svg { display: block; width: 20px; height: 20px; } /* baseline offset kills centring */
/* the A mark: fill var(--atl-on-gold), fill-rule evenodd —
   M12 3 L21 21 L17.2 21 L15.5 16.9 L8.5 16.9 L6.8 21 L3 21 Z M12 8.4 L14.6 14.5 L9.4 14.5 Z
   (swap for the wordmark-exported A when available) */

/* ============================================================
   METRIC ANATOMY — value · delta · zone band · sparkline · chevron
   ============================================================ */
.atl-met-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.atl-met-top .nm { font-size: var(--atl-fs-title); font-weight: 600; color: var(--atl-text-hi); }
.atl-met-top .vl { font-size: 20px; font-weight: 700; color: var(--atl-text-hi); font-variant-numeric: tabular-nums; }
.atl-met-top .vl small { font-size: 11.5px; font-weight: 500; color: var(--atl-text-mut); margin-left: 2px; }
.atl-met-delta { font-size: 11px; font-weight: 600; margin-top: 2px; }
.atl-met-delta--up { color: var(--atl-up); } .atl-met-delta--watch { color: var(--atl-watch); }
.atl-met-delta--flat { color: var(--atl-text-mut); } .atl-met-delta--concern { color: var(--atl-concern); }

/* zone band: TWO regions — optimal is one continuous glowing stretch */
.atl-zoneband { position: relative; height: 8px; margin-top: 12px; display: flex; gap: 2px; }
.atl-zoneband i { border-radius: var(--atl-r-pill); background: var(--atl-nested); }
.atl-zoneband .opt { background: rgba(108,214,147,0.3); box-shadow: 0 0 10px rgba(108,214,147,0.35); }
.atl-zoneband .zdot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--atl-text-hi); border: 2px solid var(--atl-bg); z-index: 2; }
.atl-zoneband .ztick { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--atl-text-mut); opacity: 0.6; }
.atl-zcaps { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--atl-text-mut); margin-top: 6px; }

.atl-spark { width: 100%; height: 36px; margin-top: 10px; display: block; overflow: visible; }
.atl-spark .l { fill: none; stroke: var(--atl-chart); stroke-width: 1.8; stroke-linecap: round; }
.atl-spark .b { stroke: var(--atl-text-mut); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }

/* metric accordion (the drill-down) */
.atl-exp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--atl-dur-med) var(--atl-ease); }
.atl-exp > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 200ms ease 40ms; }
.open > .atl-exp, .open .atl-exp { grid-template-rows: 1fr; }
.open > .atl-exp > div, .open .atl-exp > div { opacity: 1; }

/* stat tiles */
.atl-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.atl-statgrid--3 { grid-template-columns: repeat(3, 1fr); }
.atl-stat { text-align: center; padding: 10px 4px; border-radius: var(--atl-r-sm); background: var(--atl-nested); border: 1px solid var(--atl-divider); }
.atl-stat b { display: block; font-size: 17px; font-weight: 700; color: var(--atl-text-hi); font-variant-numeric: tabular-nums; }
.atl-stat span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--atl-text-mut); margin-top: 3px; }

/* progress bars */
.atl-bar { height: 5px; border-radius: var(--atl-r-pill); background: var(--atl-nested); overflow: hidden; flex: 1; }
.atl-bar i { display: block; height: 100%; border-radius: var(--atl-r-pill); background: var(--atl-up); }
.atl-bar i.gold { background: var(--atl-gold); } .atl-bar i.watch { background: var(--atl-watch); } .atl-bar i.info { background: var(--atl-info); }

/* ============================================================
   STATES — spinner (actions) · skeleton (content) · empty · error
   ============================================================ */
.atl-spin { width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2.5px solid rgba(212,178,106,0.2); border-top-color: var(--atl-gold);
  animation: atl-rot var(--atl-spin) linear infinite; }
.atl-spin--sm { width: 16px; height: 16px; border-width: 2px; }
.atl-spin--on-gold { border-color: rgba(23,18,7,0.25); border-top-color: var(--atl-on-gold); }
@keyframes atl-rot { to { transform: rotate(360deg); } }

.atl-skel { border-radius: var(--atl-r-xs);
  background: linear-gradient(90deg, rgba(255,255,255,0.045) 25%, rgba(255,255,255,0.09) 45%, rgba(255,255,255,0.045) 65%);
  background-size: 200% 100%; animation: atl-shimmer 1.4s ease infinite; }
@keyframes atl-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* skeleton for content loading > 300ms; spinner for user-initiated actions */

.atl-empty { border-style: dashed; text-align: center; padding: 26px 20px; }
/* error cards: .atl-card--concern rail + calm copy + Retry ghost. Never red-alarm. */

.atl-pulse { animation: atl-pulse 2s infinite; }
@keyframes atl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   ACCESSIBILITY & PLATFORM
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .atl-spin, .atl-skel, .atl-pulse { animation: none; }
  .atl-exp, .atl-btn, .atl-input { transition: none; }
}
/* touch targets: interactive elements ≥44px — extend hit areas with padding
   or pseudo-elements, never by growing the visual. */