/* System-wide readability floor. Loaded after the app's existing styles. */
body {
  font-size: 17px !important;
  line-height: 1.55;
}

:is(
  button,
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea,
  a.button,
  a.btn,
  a[role="button"]
) {
  min-height: 40px;
  font-size: 16px !important;
}

:is(label, legend) {
  font-size: 15px !important;
}

:is(small, .muted, .helper, .help, .hint, [class$="-helper"], [class$="-help"], [class$="-hint"]) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(table, td) {
  font-size: 15px !important;
}

th {
  font-size: 14px !important;
}

:is(
  .badge,
  .pill,
  .chip,
  .tag,
  [class$="-badge"],
  [class$="-pill"],
  [class$="-chip"],
  [class$="-tag"]
) {
  font-size: 13px !important;
}

/* Mobile-only layout overlay. */
@media (max-width: 760px) {
  :is(html, body, .page-shell, .panel, .simple-panel, .simple-claim-item, .admin-work-card) {
    max-width: 100%;
    min-width: 0;
  }

  :is(img, video, canvas, iframe) {
    max-width: 100%;
    height: auto;
  }

  :is(
    button,
    [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    a.button,
    a.btn,
    .topbar nav a,
    .claim-source-actions a
  ) {
    min-height: 44px;
    min-width: 44px;
  }

  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

  :is(
    .topbar,
    .topbar nav,
    .page-heading,
    .month-control,
    .panel-title,
    .claim-card-head,
    .admin-actions,
    .payment-review-actions,
    .claim-source-actions,
    .claim-withdraw-row
  ) {
    max-width: 100%;
    align-items: flex-start;
    flex-wrap: wrap !important;
  }

  :is(
    .content-grid,
    .simple-grid,
    .stats-grid,
    .admin-stats,
    .form-row.two,
    .simple-form .form-row,
    .claim-readonly-details,
    .claim-charge-grid,
    .claim-cost-summary,
    .claim-basis-choices,
    .admin-decision-fields,
    .supervisor-amount-card
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(.table-wrap, .table-container, .table-scroll, .payment-history-panel, .admin-list) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  :is(.modal-backdrop, .dialog-backdrop, .claim-modal-backdrop) {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

  :is(dialog, .modal, .dialog, .claim-modal, [role="dialog"]) {
    width: min(100%, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: auto;
  }
}

@media (max-width: 420px) {
  :is(.admin-actions, .payment-review-actions, .claim-source-actions) > :is(button, a) {
    flex: 1 1 100%;
  }
}

/* Selector-specific readability floors. Keep this final for cascade priority. */
.eyebrow {
  font-size: 14px !important;
}

/* Readability for routed, owner, staff, payment, and notification states. */
:is(
  .admin-next-action,
  .admin-next-action b,
  .locked-note,
  .admin-payment-guide li,
  .admin-payment-guide > div span,
  .admin-payment-result,
  .admin-payment-breakdown b,
  .payment-qr-link span,
  .payment-balance-note,
  .payment-card .payment-status-next,
  .payment-recipient span,
  .payment-safety-note,
  .payment-balance-card dt,
  .payment-balance-card dd,
  .payment-balance-main span,
  .payment-flow b,
  .payment-flow i,
  .settlement-strip span,
  .settlement-strip b,
  .owner-details span,
  .simple-claim-item dt,
  .simple-stats span,
  .form-person-note,
  .owner-item summary p,
  .simple-claim-item .item-meta,
  .amount-field span,
  .job-reference-link,
  .payment-review-card p,
  .proof-label,
  .reviewed-note,
  .claim-card .meta,
  .status-guide span,
  .notification-history-item,
  .notification-history-item time,
  .panel-title p,
  .route-note,
  .back-hub,
  .claim-detail,
  .empty,
  .login-description,
  .login-error,
  .login-back,
  .section-heading > div > p:last-child,
  .leaderboard-heading > div > p:last-child,
  .panel-lite > summary,
  .role-card b,
  .stats-grid span,
  .payment-stats span,
  .money-input span,
  .upload-box em,
  .edit-details summary,
  .claim-links a
) {
  font-size: 14px !important;
  line-height: 1.55;
}

:is(.topbar nav a, .topbar nav button) {
  font-size: 15px !important;
}

:is(
  .login-description,
  .route-note,
  .panel-title p,
  .section-heading > div > p:last-child,
  .leaderboard-heading > div > p:last-child,
  .stats-grid span,
  .payment-stats span,
  .notification-history-item,
  .notification-history-item time,
  .claim-card .meta,
  .simple-claim-item .item-meta,
  .owner-details span,
  .simple-claim-item dt,
  .simple-stats span,
  .form-person-note,
  .reviewed-note,
  .payment-review-card p
) {
  color: #59677a !important;
}

.login-error {
  color: #991b1b !important;
}

.login-back {
  color: #2454a6 !important;
}

.status {
  font-size: 13px !important;
  line-height: 1.4;
}

:is(.login-back, .job-reference-link, .back-hub, .claim-links a) {
  font-size: 16px !important;
}