/* MatrixSwaps UX hardening (Phase 8) — mobile, accessibility, confirm,
 * route tabs, trust strip. Keeps the CRT identity; additive only. */

/* Language switcher is fixed top-right (≈32px tall). On narrow screens the
 * centered header would slide under it — drop the header below its span so
 * logo + tagline never collide (keeps centering). */
@media (max-width: 640px) {
  .shell { padding: 36px 8px 8px; }
}

/* ── route tabs (dynamic) ─────────────────────────────────── */
.rtabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rtab { min-height: 40px; padding: 6px 10px; touch-action: manipulation; }
.rtab[aria-selected="true"] { color: #000; text-decoration: underline; text-shadow: none; }

/* ── quote expiry line ────────────────────────────────────── */
.q-expiry { color: var(--cyan, #33ddff); }
.q-expiry.expired { color: #ff6666; }
.q-expiry .refresh-btn { margin-left: 8px; }

/* ── confirmation review panel ────────────────────────────── */
.review { display: grid; gap: 8px; margin: 10px 0; }
.review .rv-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(51, 255, 102, 0.15); }
.review .rv-k { color: var(--green-dim, #33aa66); opacity: .85; white-space: nowrap; }
.review .rv-v { text-align: right; word-break: break-all; }
.review .rv-v.addr { font-family: monospace; color: var(--green, #33ff66); }
.review .rv-v .copy-btn { margin-left: 8px; }
.review .rv-warn { color: #ffb347; opacity: .95; }
.review .rv-expiry { color: var(--cyan, #33ddff); }

/* ── receipt created banner ───────────────────────────────── */
.created-banner { border: 1px solid var(--phosphor, #33ff66); padding: 8px 10px; margin-bottom: 10px; }
.created-banner .cb-title { color: var(--phosphor, #33ff66); font-weight: bold; letter-spacing: 1px; }
.created-banner .cb-save { opacity: .85; margin-top: 4px; font-size: 12px; }
.created-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.created-actions .btn { min-height: 40px; }

/* ── trust strip ──────────────────────────────────────────── */
.trustline { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.trustline .t-item { opacity: .75; font-size: 11px; letter-spacing: 1px; }

/* ── support page ─────────────────────────────────────────── */
.support-form { margin-top: 12px; }
.support-form .sf-row { display: flex; gap: 8px; flex-wrap: wrap; }
.support-form input { flex: 1 1 220px; }
.support-form .sf-result { margin-top: 8px; word-break: break-all; }

/* ── accessibility ────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--cyan, #33ddff); outline-offset: 2px; }
button, a, input { touch-action: manipulation; }
.btn, .exec, .rtab, .copy-btn { min-height: 40px; }

/* ── modal focus trap helpers ─────────────────────────────── */
.modal[aria-hidden="false"] { display: flex; }

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shell { padding: 36px 8px 8px; }
  .amt.wide input, .status-check-row input, .support-form input { font-size: 16px; } /* prevent iOS zoom */
  .deposit-addr { word-break: break-all; }
  .order-row { flex-wrap: wrap; }
  .order-row .v { word-break: break-all; }
  .stepper { flex-wrap: wrap; }
  .modal-win { max-width: 94vw; }
  .review .rv-row { flex-direction: column; gap: 2px; }
  .review .rv-v { text-align: left; }
  .confirm-panel-actions { flex-direction: column; }
  .confirm-panel-actions .exec { width: 100%; }
  .created-actions .btn { flex: 1 1 100%; }
  .langsw { top: 6px; right: 8px; }
  .status-check-row { flex-wrap: wrap; }
  .status-check-row .btn { flex: 1 1 100%; }
  input[type="text"], input[inputmode] { max-width: 100%; }
}
@media (max-width: 380px) {
  .langsw a { font-size: 10px; }
  .trustline .t-item { font-size: 10px; }
}

/* ── Telegram support block (Phase 20E) ─────────────────── */
.support-telegram { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--dim, #1a7a3a); }
.support-telegram .tg-handle { color: var(--cyan, #33ddff); font-size: 13px; letter-spacing: 1px; }
.support-safety { margin: 10px 0 0 0; padding-left: 18px; }
.support-safety li { margin: 4px 0; font-size: 12px; line-height: 1.55; }