/* Shared mobile layout guardrails for the public TENEBRA pages. */
@media (max-width: 760px) {
  html {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  header,
  main,
  footer,
  nav,
  section,
  article,
  aside,
  form,
  fieldset,
  dialog {
    max-width: 100%;
  }

  nav,
  .nav {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  nav a {
    margin-left: 0;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .shell {
    width: calc(100% - 28px);
    max-width: 100%;
  }

  h1 {
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  h2,
  h3,
  p,
  li,
  label,
  small {
    overflow-wrap: anywhere;
  }

  :is(.grid, .cards, .metrics, .stats, .dashboard, .workspace, .layout, .hero-grid, .form-grid, .activity-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.actions, .toolbar, .wallet-actions, .recipient-actions, .receive-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  :is(.actions, .toolbar, .wallet-actions, .recipient-actions, .receive-actions) > * {
    min-width: 0;
    max-width: 100%;
  }

  button,
  .button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  button,
  .button {
    min-height: 44px;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  pre {
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  code {
    overflow-wrap: anywhere;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}

@media (max-width: 420px) {
  .shell {
    width: calc(100% - 24px);
  }

  :is(.actions, .toolbar, .wallet-actions, .recipient-actions, .receive-actions) > .button,
  :is(.actions, .toolbar, .wallet-actions, .recipient-actions, .receive-actions) > button {
    flex: 1 1 100%;
  }
}