/* Mobile design layer — loaded after every other sheet, so on phones (≤ 900px)
   brrr.trade reads like a native app: an 8pt rhythm, 16px inputs (no iOS zoom),
   44pt+ touch targets, system type with a clear scale, flat inset-grouped cards,
   a docked tab bar and toasts that clear it, safe-area insets, pressed states,
   and reduced-motion / focus-visible respected everywhere. Desktop is untouched
   except for the two global accessibility rules at the top. */

/* ---- global: outline icons stay outlines (base.css fills every svg) ---- */
.lx-tab svg, .lx-opnav a svg { fill: none; }

/* ---- global: motion + press feedback (every width) ---- */
.btn, .au-mini, .lx-tab, .la-chip, .dv-row, .au-chip { -webkit-tap-highlight-color: transparent; }
.btn:active:not(:disabled), .au-mini:active, .la-chip:active, .au-chip:active { transform: scale(.97); }
.btn, .au-mini { transition: background-color .15s, color .15s, border-color .15s, transform .08s; }
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .au-mini:active, .lx-tab:active, .la-chip:active { transform: none; }
}

@media (max-width: 900px) {
  /* ---- foundations ---- */
  :root { --r: 20px; --r-sm: 14px; }
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; line-height: 1.45; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
  input, select, textarea { font-size: 16px; }          /* < 16px zooms the page on iOS */
  h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
  h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.015em; }
  h3 { font-size: 17px; line-height: 1.3; }
  .au-hint, .la-note, .lxw-sub, .lx-sub { font-size: 13.5px; line-height: 1.4; }

  /* ---- top bar: compact, one row, safe-area aware ---- */
  .lx-topbar { height: auto; min-height: 54px; padding: env(safe-area-inset-top) 12px 0 14px; gap: 8px; }
  .lx-brand { gap: 8px; }
  .lx-brand-mark { width: 26px; height: 26px; }
  .lx-brand-name { font-size: 18px; }
  .lx-topbar-right { gap: 8px; min-width: 0; flex-wrap: nowrap; }
  .lx-theme-btn { display: none; }                       /* theme follows the system on phones; the toggle lives on desktop */
  .lx-wallet { display: none; }                          /* the address lives in the Launch tab's wallet card */
  .lx-theme-btn { width: 36px; height: 36px; }
  .lx-avatar, .lx-logout { width: 36px; height: 36px; }
  .lx-opnav { padding: 2px; gap: 0; }
  .lx-opnav a { height: 32px; width: 36px; padding: 0; justify-content: center; }
  .lx-opnav a svg { width: 18px; height: 18px; }

  /* ---- cards / panels: flat, roomy, no hairline clutter ---- */
  .lx-launch { padding: 12px 12px 0; gap: 12px; }
  .lx-launch.has-tabs .pnl { border-radius: 20px; border-color: transparent; box-shadow: 0 1px 0 var(--border), 0 10px 30px -22px rgba(15, 23, 42, .35); }
  .pnl-head { min-height: 54px; padding: 8px 12px 8px 18px; }
  .pnl-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
  .pnl-body { padding: 16px; }
  .lx-launch.has-tabs .pnl-body-rail { padding: 0; }
  .lx-launch.has-tabs .pnl-rail.dv-rail-launch { height: calc(100dvh - 54px - 84px - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }

  /* ---- controls: 44pt+ targets, 16px text, soft radii ---- */
  .btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
  .btn-md { height: 48px; padding: 0 20px; font-size: 16px; }
  .btn-lg, .lx-form-mount .lc-launch, .pnl-launch .lx-form-mount .lc-launch { height: 56px; font-size: 17px; }
  .au-mini { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
  .au-input, .lc-input, .tp-addr, .la-input { min-height: 48px; border-radius: 14px; font-size: 16px; }
  .au-input { height: 48px; padding: 0 14px; }
  select.au-input { padding-right: 32px; }
  textarea.au-input { min-height: 72px; padding: 12px 14px; }
  .lc-input { padding: 13px 14px; }
  .au-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .au-field .au-input { width: 100%; }
  .au-label { font-size: 13px; }

  /* toggles: label left, switch right (settings-app convention), full-row tap target */
  .au-toggle { flex-direction: row-reverse; justify-content: space-between; align-items: center; min-height: 48px; padding: 6px 0; gap: 14px; }
  .au-switch { width: 51px; height: 31px; margin: 0; background: var(--border-2); }
  .au-switch::after { width: 27px; height: 27px; top: 2px; left: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
  .au-toggle input:checked + .au-switch { background: var(--green); }
  .au-toggle input:checked + .au-switch::after { transform: translateX(20px); }
  .au-toggle-text { font-size: 16px; gap: 1px; }
  .au-toggle-text b { font-weight: 600; }
  .au-toggles { gap: 0; }
  .au-toggles .au-toggle + .au-toggle { border-top: 1px solid var(--border); }

  /* grouped settings: inset rows, 52pt summaries */
  .au-essentials { gap: 4px; padding: 0 0 8px; }
  .au-row2 { min-height: 48px; }
  .au-row2 .au-input { max-width: 56%; }
  .au-group > summary { padding: 15px 2px; min-height: 52px; }
  .au-group-title { font-size: 16px; font-weight: 700; }
  .au-group-sum { font-size: 13px; }
  .au-group-body { padding: 4px 0 18px; gap: 12px; }
  .au-settings-actions { gap: 10px; }
  .au-settings-embed .au-card-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .au-settings-embed .au-card-head .au-hint { font-size: 13px; }
  .au-settings-actions { flex-direction: column; align-items: stretch; }
  .au-settings-actions .btn { width: 100%; height: 48px; font-size: 16px; }

  /* status pills: a single scrolling strip instead of a stack */
  .au-pillrow { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 92%, transparent); }
  .au-pillrow::-webkit-scrollbar { display: none; }
  .au-pill { flex: none; height: 30px; display: inline-flex; align-items: center; font-size: 12.5px; }

  /* alerts */
  .au-alert { border-radius: 16px; padding: 14px; flex-direction: column; gap: 8px; }
  .au-alert .au-mini { align-self: flex-start; }
  .au-alert-main b { font-size: 16px; }

  /* fund / phone / transfer blocks */
  .au-fundpool, .au-phone { border-radius: 16px; padding: 14px; gap: 10px; }
  .au-fundpool-row { gap: 8px; }
  .au-fp-source { max-width: none; width: 100%; }
  .au-fp-count { width: 64px; }
  .au-fp-sol { width: 88px; }
  .au-phone-actions { gap: 8px; }
  .tp { gap: 14px; }
  .tp-send { height: 56px; font-size: 17px; border-radius: 16px; }

  /* discover rail rows: taller, bigger art, one line each */
  .dv-row { padding: 12px 12px; gap: 12px; border-radius: 14px; min-height: 60px; }
  .dv-logo { width: 44px; height: 44px; border-radius: 12px; }

  /* preview under the form on the Create tab: compact, image beside the text */
  .lx-launch.has-tabs .lxp-card { display: flex; align-items: center; gap: 14px; padding: 14px; }
  .lx-launch.has-tabs .lxp-img { width: 88px; height: 88px; flex: none; margin: 0; border-radius: 16px; max-width: none; }
  .lx-launch.has-tabs .lxp-symbol { font-size: 20px; }
  .lx-launch.has-tabs .lxp-name { font-size: 14px; }
  .lx-launch.has-tabs .lxp-desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .lx-launch.has-tabs .lxp-size { display: none; }

  /* ---- tab bar: native feel ---- */
  .lx-launch.has-tabs { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .lx-launch.has-tabs .lx-tabs { padding: 8px 6px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .lx-tab { gap: 4px; padding: 6px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0; min-height: 52px; }
  .lx-tab svg { width: 26px; height: 26px; stroke-width: 1.8; }
  .lx-tab[aria-pressed="true"] { font-weight: 700; }
  .lx-tab[aria-pressed="true"] svg { stroke-width: 2.2; }
  .lx-tab::before { content: ''; position: absolute; }
  .lx-tab { position: relative; }

  /* ---- toasts clear the tab bar ---- */
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); left: 16px; right: 16px; transform: none; width: auto; border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 600; text-align: center; }

  /* ---- Launch Apps page (its own route, no tab bar) ---- */
  .la-wrap { padding: 0 14px 40px; }
  .la-composer { border-radius: 24px; }
  .la-card { border-radius: 18px; padding: 16px; }
  .la-dock { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* ---- console / settings takeover pages ---- */
  .lx-settings-takeover { padding: 12px 12px 40px; }
  .lx-settings-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
}

@media (max-width: 380px) {
  .lx-tab { font-size: 10.5px; }
}