/* Shared mobile-first layer: account, authentication and payment checkout. */
html { -webkit-text-size-adjust: 100%; scroll-padding-block: 80px; }
@media (max-width: 900px) {
  /* The dock is about 83px tall before its safe-area inset; keep keyboard
     focus and its outline above it, including when the user enlarges text. */
  html { scroll-padding-block-end: calc(6.5rem + env(safe-area-inset-bottom)); }
}
body { min-width: 0; }
body:has(dialog[open]) { overflow: hidden; }
img { max-width: 100%; }
input, select, textarea { font-size: 16px; max-width: 100%; }
input, select { min-height: 48px; }
button, a { -webkit-tap-highlight-color: transparent; }
.btn, .btn.small { min-height: 44px; font-size: 14px; }
.field label { font-size: 14px; line-height: 1.5; }
.field small, .eyebrow, .badge { font-size: 12px; }
.main, .card, .grid > *, .page-head > div { min-width: 0; }
.card, .list-card, .modal-body, .legal-page { overflow-wrap: anywhere; }
.shell { display: block; }
.shell .sidebar { display: none; }
.shell .topbar { position: sticky; top: 0; z-index: 20; height: auto; min-height: 68px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); gap: 10px; }
.shell .topbar .btn { min-width: 44px; min-height: 44px; font-size: 14px; }
.shell .prod-label { font-size: 0; max-width: none; }
.shell .prod-label > span { display: none; }
.shell .prod-label b { font-size: 14px; line-height: 1.4; }
.mobile-nav-toggle { display: inline-flex; }
.shell .content { padding: 26px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); }
.shell .page-head { flex-direction: column; align-items: stretch; gap: 18px; }
.shell .page-head h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; }
.shell .page-head .subtitle { font-size: 16px; line-height: 1.6; }
.shell .page-head > .actions { justify-content: flex-start; }
.shell .page-head > .actions .btn { flex: 1; }
.production-footer { padding: 24px 16px calc(100px + env(safe-area-inset-bottom)); font-size: 13px; flex-direction: column; gap: 12px; }
.mobile-dock { position: fixed; bottom: 0; inset-inline: 0; z-index: 30; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 2px; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -4px 24px #14200d08; }
.mobile-dock a, .mobile-dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 54px; padding: 6px 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; text-decoration: none; }
.mobile-dock svg { width: 21px; height: 21px; }
.mobile-dock [aria-current] { background: var(--soft); color: var(--text); font-weight: 700; }
#mobile-navigation { width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.mobile-navigation-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 1; }
.mobile-navigation-head h2 { font-size: 18px; }
#mobile-navigation nav { padding: 8px 12px 16px; }
#mobile-navigation nav a { display: flex; align-items: center; gap: 14px; padding: 14px 12px; min-height: 50px; font-size: 16px; border-radius: 10px; }
#mobile-navigation nav a span { flex: 1; }
#mobile-navigation nav [aria-current] { background: var(--soft); font-weight: 650; }
.transaction-table { overflow: visible; }
.transaction-table table, .transaction-table tbody { display: block; min-width: 0; width: 100%; }
.transaction-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.transaction-table tr { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.transaction-table tr:last-child { border-bottom: 0; }
.transaction-table td { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0; border: 0; font-size: 14px; white-space: normal; text-align: right; }
.transaction-table td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
.transaction-table .transaction-action .btn { width: 100%; margin-top: 8px; }
.transaction-table .badge { text-align: right; }
.grid.three, .quick-actions { grid-template-columns: 1fr; }
.card-header { flex-wrap: wrap; gap: 12px; }
.ticket-row { flex-wrap: wrap; }
.ticket-row > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.ticket-row strong { font-size: 16px; }
.capability-list > div { flex-wrap: wrap; gap: 8px; font-size: 14px; }
.capability-list .badge, .ticket-row .badge { font-size: 12px; }
.buy-steps { flex-wrap: wrap; gap: 10px 16px; }
.buy-steps li { font-size: 12px; }
.buy-experience .subtitle, .buy-collect p, .collection-section-title p, .collection-open p { font-size: 14px; }
.buy-limit, .collection-limits, .collection-fineprint { font-size: 12px; line-height: 1.6; }
.buy-breakdown > div { gap: 12px; font-size: 14px; }
.buy-wallet-select select, .collection-wallet select, .collection-form .field input { font-size: 16px; min-height: 44px; }
.buy-collect-actions { flex-wrap: wrap; }
.buy-collect-actions .btn { font-size: 14px; white-space: normal; }
.collection-mode { min-width: 0; flex-wrap: wrap; }
.collection-mode strong, .collection-form .field label, .collection-label { font-size: 14px; }
.collection-mode small, .collection-wallet label, .collection-after p, .collection-record p { font-size: 12px; }
.collection-record .btn, .collection-after strong { font-size: 14px; }
.collection-preview { padding: 20px; }
.collection-preview .preview-amount { font-size: clamp(28px, 8vw, 40px); }
dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.modal-header { position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal-header h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-header .btn { flex-shrink: 0; }
.modal-body { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.payment-summary { flex-wrap: wrap; }
.payment-qr { height: auto; aspect-ratio: 1; }
.payment-journey strong { font-size: 13px; }
.payment-journey small { font-size: 12px; }
.payment-copy .pix-code { font-size: 16px; }
.payment-sync, .payment-support, .payment-state p, .payment-copy > p { font-size: 14px; }
.legal-page { padding: 24px max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.auth-mobile-brand { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 28px; }
.auth-form { padding: max(28px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
#toast { bottom: calc(90px + env(safe-area-inset-bottom)); width: max-content; }
@media (max-width: 380px) {
  .shell .topbar .actions a { font-size: 0; gap: 0; }
  .shell .prod-label b { font-size: 13px; }
  .payment-journey { grid-template-columns: 1fr; gap: 16px; }
  .payment-journey li { flex-direction: row; align-items: center; }
  .payment-journey li::before { display: none; }
}
@media (min-width: 601px) {
  .grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .transaction-table { overflow-x: auto; }
  .transaction-table table { display: table; }
  .transaction-table tbody { display: table-row-group; }
  .transaction-table thead { display: table-header-group; position: static; width: auto; height: auto; clip-path: none; }
  .transaction-table tr { display: table-row; }
  .transaction-table td { display: table-cell; padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); }
  .transaction-table td[data-label]::before { display: none; }
  .transaction-table .transaction-action .btn { width: auto; margin: 0; }
}
@media (min-width: 901px) {
  .shell { display: grid; grid-template-columns: 230px minmax(0,1fr); }
  .shell .sidebar { display: flex; }
  .mobile-dock, .mobile-nav-toggle, .auth-mobile-brand { display: none; }
  .shell .content { padding: 38px 32px; }
  .shell .page-head { flex-direction: row; align-items: center; }
  .shell .page-head > .actions .btn { flex: initial; }
  .shell .prod-label { font-size: 14px; }
  .shell .prod-label > span { display: inline; }
  .shell .sidebar .nav .nav-item { font-size: 14px; min-height: 48px; }
  .shell .account-chip b { font-size: 14px; overflow-wrap: anywhere; }
  .shell .account-chip > div { min-width: 0; }
  .shell .account-chip .avatar { flex-shrink: 0; }
  .shell .sidebar-foot .btn { min-height: 44px; font-size: 14px; }
  .production-footer { padding: 24px 32px; flex-direction: row; }
  #toast { bottom: 24px; }
}
@media print { .mobile-dock, #mobile-navigation { display: none; } }

@media (max-width: 900px) and (pointer: coarse) {
  body:has(input:focus, textarea:focus, select:focus) .mobile-dock { display: none; }
}
/* WebKit's native select can paint long wallet labels outside its flex item. */
.auth-form select, .security-page select, .shell select,
.buy-wallet-select select, .collection-wallet select {
  min-width: 0; width: 100%; appearance: none; -webkit-appearance: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23858f7b' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 16px;
}