/* Shared screen usability layer. Specificity is intentional: this file loads last. */
@media screen {
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body :is(button, [role="button"], input[type="submit"], input[type="button"],
    a.pay-button, .account-form button, .shop-buy, .primary, .secondary,
    .ta-button, .scan-button, .button) {
    min-height: 44px;
  }

  body :is(button, input, select, textarea) { font-family: inherit; }
  body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--interface-focus, #71e8d2);
    outline-offset: 3px;
  }

  body :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
    min-height: 44px;
    max-width: 100%;
  }

  body :is(button, input[type="submit"], input[type="button"]):disabled,
  body :is(button, input[type="submit"], input[type="button"])[aria-disabled="true"] {
    cursor: not-allowed;
    filter: saturate(.62);
    opacity: .58;
  }

  body :is([aria-busy="true"], .is-loading, .loading) { cursor: progress; }
  body :is([role="alert"], [aria-invalid="true"], .error, .is-error, .notice.error) {
    overflow-wrap: anywhere;
    line-height: 1.55;
  }
  body :is([role="status"], .empty, .shop-empty, .pay-status, .account-status,
    .ta-status, .notice) { overflow-wrap: anywhere; }

  body :is(p, .pay-muted, .account-note, .account-muted, .scan-help,
    .organizer-shell main p) {
    max-width: 72ch;
    line-height: 1.6;
  }

  body :is(.pay-toolbar, .pay-actions, .account-toolbar, .account-toolbar-actions,
    .shop-toolbar, .shop-orders > header, .ta-top-actions, .section-heading,
    .inventory-heading, .actions, .filters, .store-top-actions, .scan-topbar nav,
    .organizer-shell .topbar) { min-width: 0; }

  body :is(.pay-toolbar, .pay-actions, .account-toolbar-actions, .shop-toolbar,
    .ta-top-actions, .section-heading, .actions, .filters, .store-top-actions,
    .scan-topbar nav) { flex-wrap: wrap; }

  body :is(.pay-toolbar input, .shop-search input, .filters input, .filters select) {
    min-width: min(100%, 220px);
  }

  body :is(.table-wrap, .count-table-wrap, .pay-table-wrap, .ta-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body table { font-variant-numeric: tabular-nums; }
  body :is(th, td) { overflow-wrap: anywhere; }

  /* Modal surfaces remain within the viewport and scroll internally when needed. */
  body.payment-page :is(dialog#finance-customer-dialog, dialog#finance-proof-dialog),
  body.sos-account-surface dialog.account-ticket-dialog,
  body.sos-merch-surface dialog.order-dialog,
  body.sos-store-surface dialog,
  body.sos-organizer-surface dialog {
    box-sizing: border-box;
    width: min(720px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  @media (max-width: 760px) {
    body :is(.pay-shell, .account-shell, .shop-shell, .scan-shell, .ta-app,
      .shell, .organizer-shell) { min-width: 0; }

    body :is(.pay-top, .shop-header, .account-topbar, .scan-topbar, .ta-topbar,
      .topbar) { flex-wrap: wrap; gap: 10px; }

    body :is(.pay-top nav, .shop-header nav, .scan-topbar nav, .ta-top-actions) {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 100%;
    }

    body :is(.pay-toolbar, .pay-actions, .account-toolbar-actions, .actions,
      .filters, .store-top-actions) > * { min-width: 0; max-width: 100%; }

    body :is(.pay-grid, .workspace, .account-grid, .scan-layout) { min-width: 0; }

    /* Long event, ticket and order identifiers wrap instead of widening checkout. */
    body.payment-page :is(#checkout-event, #checkout-ticket, #checkout-round,
      #checkout-customer-email, #promptpay-order, #promptpay-name) {
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
    }
    body.payment-page .pay-row { min-width: 0; }
    body.payment-page .pay-row > :last-child { min-width: 0; overflow-wrap: anywhere; }

    body :is(.pay-toolbar input, .shop-search input, .filters input, .filters select) {
      min-width: 0;
      width: 100%;
    }

    body.payment-page :is(dialog#finance-customer-dialog, dialog#finance-proof-dialog),
    body.sos-account-surface dialog.account-ticket-dialog,
    body.sos-merch-surface dialog.order-dialog,
    body.sos-store-surface dialog,
    body.sos-organizer-surface dialog {
      width: calc(100vw - 20px);
      max-width: calc(100vw - 20px);
      max-height: calc(100dvh - 20px);
      padding-inline: clamp(14px, 4vw, 24px);
    }
  }

  @media (max-width: 760px) {
    body :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
      font-size: max(16px, 1em);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body :is(button, a, input, select, textarea, [role="button"]) {
      scroll-behavior: auto;
      transition-duration: .01ms !important;
    }
  }
}

@media screen {
  .interface-skip-link {
    position: fixed; top: 12px; left: 16px; z-index: 11000;
    transform: translateY(-180%); padding: 12px 18px;
    border-radius: 8px; background: #a3ded1; color: #10221e;
    font-weight: 700; text-decoration: none;
  }
  .interface-skip-link:focus { transform: none; }
  body.sos-account-surface .interface-password-field { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
  body.sos-account-surface .interface-password-field input { flex: 1; width: 0; min-width: 0; }
  body.sos-account-surface .interface-password-toggle {
    flex: 0 0 auto; width: auto; min-width: 64px; margin: 0; padding: 8px 12px;
    background: #1a2026 !important; color: #f0f2f3 !important;
    border: 1px solid #414b54; border-radius: 6px !important; font-size: 14px;
  }
  body .interface-scrollable { scrollbar-width: auto; scrollbar-color: #657780 #14191e; }
  body nav a[aria-current="page"] { text-decoration-thickness: 2px; text-underline-offset: .3em; }
}

@media screen and (max-width: 760px) {
  body.sos-account-surface .account-topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px; padding: 10px 14px;
  }
  body.sos-account-surface .account-brand { gap: 8px; min-width: 0; }
  body.sos-account-surface .account-brand img { width: 32px; height: 32px; }
  body.sos-account-surface .account-brand strong { font-size: 10px; letter-spacing: .04em; }
  body.sos-account-surface .account-topbar .account-home { min-height: 44px; padding: 8px; font-size: 12px; }
  body.sos-account-surface .account-topbar .global-language-switch { margin: 0; padding: 0; }
  body.sos-account-surface .account-topbar .global-language-switch select { min-width: 76px; padding-inline: 10px 22px; }
  body.sos-account-surface .account-social-login { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.sos-account-surface .account-provider { min-width: 0; padding: 10px; gap: 8px; }
  body.sos-account-surface .account-provider strong { font-size: 12px; }
}
@media screen and (max-width: 350px) {
  body.sos-account-surface .account-brand strong { max-width: 72px; white-space: normal; }
}
@media print {
  .interface-skip-link, .interface-password-toggle { display: none !important; }
}