/* UI-009: shared mobile ergonomics and device safe-area corrections. */
@media (max-width: 960px) {
  body.ui-003 .safe-actions button,
  body.ui-005 .action-bar button,
  body.ui-008 .action-zone .primary-action {
    min-height: 44px;
  }

  body.ui-005 .entry-copy {
    min-width: 0;
  }

  body.ui-005 .workspace,
  body.ui-005 .editor-pane,
  body.ui-005 .inspector {
    min-width: 0;
    max-width: 100%;
  }

  body.ui-005 .editor-pane {
    overflow: hidden;
  }

  body.ui-005 .entry-copy strong,
  body.ui-005 .entry-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

body.ui-007 button:focus-visible,
body.ui-007 a:focus-visible,
body.ui-007 input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@supports (padding: max(0px)) {
  @media (max-width: 960px) {
    body.ui-001 .mobile-nav {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      height: calc(70px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    body.ui-001 main {
      padding-bottom: calc(110px + env(safe-area-inset-bottom));
    }

    body.ui-002 {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    body.ui-003 .mobile-nav,
    body.ui-008 .mobile-nav {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      height: calc(58px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    body.ui-003 main,
    body.ui-008 main {
      padding-bottom: calc(62px + env(safe-area-inset-bottom));
    }

    body.ui-004 .mobile-nav {
      left: calc(12px + env(safe-area-inset-left));
      right: calc(12px + env(safe-area-inset-right));
      bottom: calc(10px + env(safe-area-inset-bottom));
    }

    body.ui-004 .review-decision-bar {
      left: calc(12px + env(safe-area-inset-left));
      right: calc(12px + env(safe-area-inset-right));
      bottom: calc(79px + env(safe-area-inset-bottom));
    }

    body.ui-005 .mobile-nav,
    body.ui-006 .mobile-nav {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      height: calc(54px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    body.ui-005 .action-bar,
    body.ui-006 footer {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      bottom: calc(54px + env(safe-area-inset-bottom));
    }

    body.ui-005 main,
    body.ui-006 main {
      padding-bottom: calc(138px + env(safe-area-inset-bottom));
    }

    body.ui-007 .mobile-nav {
      left: env(safe-area-inset-left);
      right: env(safe-area-inset-right);
      height: calc(58px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }

    body.ui-007 .package-actions {
      bottom: calc(57px + env(safe-area-inset-bottom));
    }

    body.ui-007 .toast {
      bottom: calc(68px + env(safe-area-inset-bottom));
    }
  }
}