/* Phone layer.
 *
 * The platform was designed dense: 7-10px labels, 8px table headers, badges at 7px. That reads
 * fine on a desktop monitor at arm's length and is genuinely unusable on a phone. The layouts
 * themselves already respond — sidebars go off-canvas, grids collapse, tables scroll — so what is
 * missing is not structure but legibility and something big enough to tap.
 *
 * This file is loaded last, after every page stylesheet, and is the only place phone-specific
 * overrides live. It leans on !important because it sits on top of 68 stylesheets whose
 * specificity varies wildly (`.admin-topbar small`, `.invoice-table td small`, and so on); an
 * override layer that loses to the thing it is overriding is worse than no layer at all. Nothing
 * here applies above 720px, so the desktop design is untouched.
 */

@media (max-width: 720px) {

  /* ---- Legibility floor -------------------------------------------------
   * The bulk of this is generated: every selector in the codebase that sets
   * text below 11px is raised, in its own original scope, by
   * scripts/build-mobile-type-floor.js. Sizes only ever go up.
   */

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }

  /* `small` with no rule of its own inherits the browser's 0.8em, so it lands
   * wherever its parent happens to be — around 9.2px inside a 11.5px block.
   * The generated rules below cannot catch these because no stylesheet sets
   * them; a floor on the bare element does. Anything more specific still wins. */
  small { font-size: 11px }
  .pagination, .pagination *, .pagination-size, .table-controls,
  .table-controls *, .native-admin-pager, .native-admin-pager *,
  .admin-page .native-admin-pager select { font-size: 11.5px !important }

  /* Uppercase micro-labels get their tracking eased as they grow, or they
   * turn into a smear at the larger size. */
  th, .invoice-table th, .profile-panel dt, .detail-grid small,
  .search-field, .eyebrow { letter-spacing: .6px !important }

  /* Status pills carry meaning and are the most-read text in the portals. */
  .type-badge, .status-badge, .portal-badge, .listing-status, .invoice-status,
  .balance-status, .job-state, .account-badge, .shop-tile-count, .masjid-tag,
  .tag, .verified, .verified-profile, .application-tabs b, .admin-sidebar nav a b,
  .salary-hint, .product-shared { line-height: 1.4 !important }

  /* Some links hide their own label at this width (font-size:0) and show a
   * shorter one through ::after. That is a sound idea, and it means these two
   * must never be given a font-size here — doing so un-hides the long label
   * and the topbar ends up showing both. Size the ::after, not the element. */
  .view-site:after, .public-profile-link:after { font-size: 11.5px !important }
  .view-site, .public-profile-link {
    display: inline-flex !important; align-items: center !important;
    min-height: 40px !important; max-width: 100% !important; white-space: nowrap;
  }

  /* TYPE-FLOOR-START — generated by scripts/build-mobile-type-floor.js */
  /* 440 selectors that set text below 11px, raised to a readable size. */

  .account-note small,
  .account-readonly dt,
  .account-status,
  .activated-account small,
  .activation-content>footer,
  .admin-health-panel a>small,
  .admin-job-summary small,
  .admin-profile small,
  .advertising-panel header p,
  .adverts-block .eyebrow,
  .all-masjid-status span,
  .allocation-line,
  .allocation>footer,
  .allocation>header,
  .applicant-cell small,
  .application-tabs b,
  .applied-flag,
  .audit-date,
  .balance-status,
  .billing-warning small,
  .business-account small,
  .business-cell small,
  .business-fields label>span,
  .business-identity small,
  .business-stats em,
  .business-stats small,
  .business-tags em,
  .business-tile dt,
  .business-topbar small,
  .candidate-consent,
  .candidate-fields label>small,
  .candidate-fields label>span,
  .candidate-job em,
  .candidate-job small,
  .candidate-privacy small,
  .candidate-reference small,
  .cart-qty span,
  .code-error,
  .completion small,
  .completion>span,
  .decision-note-result small,
  .detail-grid small,
  .encouraged-groups label,
  .encouraged-groups legend,
  .entity-tabs b,
  .fee-summary p,
  .filter-heading button,
  .filter-note small,
  .filter-note strong,
  .finance-panel header p,
  .finance-stats small,
  .finance-stats span,
  .finance-summary small,
  .finance-table th,
  .finance-workflow-status,
  .history-row,
  .home-page .business-card .category,
  .home-page .business-card .verified,
  .home-page .masjid-overlay small,
  .invoice-action,
  .invoice-brand em,
  .invoice-brand small,
  .invoice-line small,
  .invoice-modal header small,
  .invoice-panel header p,
  .invoice-proof-details dt,
  .invoice-proof-modal-meta small,
  .invoice-proof-preview small,
  .invoice-status,
  .invoice-summary small,
  .invoice-table td small,
  .invoice-table th,
  .islamic-qr-card .qr-url,
  .job-approval-panel header p,
  .job-approval-panel header>span,
  .job-card-side small,
  .job-consent,
  .job-copy>p,
  .job-fields label>small,
  .job-fields label>span,
  .job-filters>label>span,
  .job-item-actions button,
  .job-item-content>p,
  .job-item-fee small,
  .job-item-tags span,
  .job-management header p,
  .job-masjids legend,
  .job-masjids small,
  .job-masjids>p,
  .job-results header p,
  .job-results header select,
  .job-review-summary small,
  .job-state,
  .job-stats small,
  .job-trust small,
  .legal-toc strong,
  .listing-invoice-actions .button,
  .listing-masjid small,
  .listing-payment-link,
  .listing-price small,
  .listing-status,
  .listing-summary small,
  .masjid-identity small,
  .masjid-job-actions button,
  .masjid-job-error,
  .masjid-job-row small,
  .masjid-status-list b,
  .masjid-status-list em,
  .masjid-status-list small,
  .matched-business small,
  .mosque-product-summary small,
  .mosque-profile-order small,
  .mosque-profile-product dt,
  .notification-button b,
  .payment-field span,
  .payment-field>small,
  .payment-fields span,
  .payment-step-bank small,
  .payment-step-fields small,
  .portal-badge,
  .portal-detail-grid small,
  .portal-sidebar nav a>b,
  .portal-stats em,
  .portal-stats small,
  .portal-topbar small,
  .poster-preview p,
  .poster-preview>small,
  .poster-qr-fallback em,
  .poster-qr-fallback small,
  .pricing-form label>span,
  .product-card-body dt,
  .product-category,
  .product-flag,
  .product-price small,
  .product-shared,
  .profile-listing-row small,
  .profile-panel dt,
  .profile-section-label,
  .profile-warning small,
  .proof-fields label>span,
  .proof-invoice span,
  .proof-notice small,
  .proof-queue header p,
  .proof-queue>header>span,
  .proof-review label,
  .proof-review-details small,
  .proof-row button,
  .proof-row small,
  .proof-state,
  .proof-status,
  .prototype-note,
  .public-job-body dt,
  .public-job-drawer>footer small,
  .public-job-tags span,
  .request-panel th,
  .rich-job-fields>p,
  .route-badge,
  .salary-hint,
  .search-field>span:first-child,
  .settings-readonly dt,
  .settlement-card button,
  .settlement-card p,
  .settlement-direction,
  .settlement-directions small,
  .settlement-panel header p,
  .settlement-panel>header>span,
  .settlement-totals small,
  .shop-banner-ways em,
  .shop-payment-state small,
  .shop-preview-body small,
  .shop-preview-ways em,
  .shop-tile-city,
  .shop-tile-count,
  .shop-tile-methods em,
  .stat-grid .stat-card em,
  .stat-grid .stat-card>i,
  .stat-grid em,
  .status-badge,
  .status-pill,
  .type-badge,
  .verified-profile,
  .view-account,
  .view-detail-grid small,
  th { font-size: 11px !important }

  #already-applied-note,
  .account-card dt,
  .account-fields label,
  .account-hint,
  .account-note strong,
  .activated-account span,
  .activation-progress i,
  .admin-health-panel a>span,
  .admin-health-panel>header>p,
  .admin-sidebar nav a b,
  .admin-topbar small,
  .advertising-panel header a,
  .billing-warning strong,
  .box small,
  .business-verified,
  .candidate-privacy strong,
  .confirm-actions button,
  .confirm-modal button,
  .confirm-modal p,
  .consent:has(input.invalid):after,
  .copy-button,
  .customer-bank-card small,
  .disable-button,
  .entity-actions a,
  .fee-summary span,
  .field .field-hint,
  .field>small,
  .finance-empty,
  .finance-table td,
  .finance-tools input,
  .finance-tools select,
  .help-note small,
  .help-note>span,
  .hero-badge small,
  .home-page .business-card .card-meta,
  .home-page .masjid-overlay em,
  .home-page .trust-row span,
  .inline-back,
  .input-error,
  .invoice-panel header button,
  .invoice-proof-count,
  .invoice-proof-details .button,
  .invoice-proof-dialog label,
  .invoice-proof-dialog>header small,
  .invoice-proof-modal-error,
  .invoice-proof-note,
  .invoice-proof-title small,
  .invoice-table td,
  .job-card-side button,
  .job-empty p,
  .job-filters select,
  .job-masjids strong,
  .job-review-content p,
  .job-review-summary strong,
  .job-tools input,
  .job-tools select,
  .job-trust strong,
  .jobs-hero aside p,
  .jobs-hero form button,
  .legal-updated,
  .login-admin a,
  .lookup-error,
  .manage-request,
  .masjid-overlay small,
  .masjid-tile-stats span,
  .matched-business strong,
  .new-search,
  .otp-error,
  .own-password-fields label,
  .pagination-actions button,
  .pagination-size,
  .password-input button,
  .password-rules li,
  .payment-step-fields label,
  .payment-step-note,
  .portal-empty p,
  .portal-note,
  .portal-topbar>.button,
  .poster-preview>strong,
  .poster-qr-fallback strong,
  .privacy-note small,
  .product-card-body>p,
  .product-row-actions button,
  .profile-listing-row p,
  .profile-panel dd,
  .profile-panel header button,
  .profile-settlement-action,
  .profile-warning strong,
  .proof-invoice strong,
  .proof-notice strong,
  .proof-review-details strong,
  .proof-row,
  .public-job-body dd,
  .public-job-drawer header>p:not(.step-kicker),
  .public-job-empty p,
  .public-profile-link:after,
  .qr-actions .button,
  .reference-box small,
  .reference-box span,
  .reference-summary span,
  .request-panel header p,
  .request-panel td,
  .request-tools input,
  .request-tools select,
  .review-grid small,
  .review-link,
  .settings-fields label,
  .settings-hint,
  .settings-photo-empty,
  .settlement-file-help,
  .shop-banner-art span,
  .shop-tile-delivery,
  .stat-grid .stat-card small,
  .stat-grid small,
  .status-steps,
  .status-timeline b,
  .status-timeline small,
  .table-pagination,
  .tag,
  .toast,
  .trust-row span,
  .via-masjid { font-size: 11.5px !important }

  #own-password-form footer .button,
  .account-badge,
  .account-body>footer .button,
  .account-error,
  .account-panel>header p,
  .account-saved,
  .activation-field>span:first-child,
  .admin-empty p,
  .admin-profile>span,
  .admin-role,
  .admin-search input,
  .admin-user-status,
  .advert-job .button,
  .advert-job-tags span,
  .adverts-block .block-heading>div>p:not(.eyebrow),
  .application-tabs button,
  .arrow-link,
  .aside-note small,
  .audit-date input,
  .audit-pagination label,
  .audit-pagination strong,
  .audit-panel select,
  .bank-visibility,
  .block-button,
  .business-cell strong,
  .business-fields input,
  .business-fields select,
  .business-fields textarea,
  .business-signout,
  .business-tile dd,
  .business-tile header small,
  .business-tile>p,
  .business-welcome>.button,
  .candidate-back,
  .candidate-success>p,
  .cart-line-body>small,
  .cart-remove,
  .cash-owed-banner small,
  .category,
  .deactivate-button,
  .decision-buttons button,
  .decision-note,
  .demo-code,
  .directory-filters label,
  .entity-tabs button,
  .faq details p,
  .finance-heading>.button,
  .forgot-reference,
  .form-intro,
  .help-note strong,
  .hero-quick a,
  .history-row.detailed a,
  .history-row.detailed em,
  .home-page .business-card .card-body>p,
  .how-grid p,
  .invoice-brand strong,
  .invoice-filter-row select,
  .invoice-line strong,
  .invoice-proof-details dd,
  .invoice-proof-empty p,
  .invoice-proof-modal-meta strong,
  .invoice-proof-panel>header p:last-child,
  .invoice-summary span,
  .islamic-qr-card .qr-actions>*,
  .job-fields input,
  .job-fields select,
  .job-fields textarea,
  .jobs-heading>.button,
  .jobs-hero form input,
  .legal-toc a,
  .listing-confirm>div>p:not(.step-kicker),
  .listing-empty,
  .login-alt,
  .login-roles span,
  .masjid-job-row strong,
  .masjid-map-link,
  .masjid-option i,
  .masjid-tile-city,
  .masjid-title-row p,
  .mobile-progress,
  .mosque-listing-card>header>div>p:last-child,
  .mosque-order .shop-method-badge,
  .mosque-profile-order span,
  .mosque-profile-product-copy>p,
  .order-banner,
  .overview-heading .button,
  .own-password-card>header p,
  .own-password-error,
  .own-password-saved,
  .pagination-summary,
  .panel-header p,
  .panel-tools select,
  .payment-step-actions #proof-later,
  .payment-step-bank p,
  .payment-step-error,
  .pending-access-notice p,
  .photo-preview button,
  .portal-detail-grid span,
  .portal-signout,
  .portal-welcome .button,
  .pricing-error,
  .pricing-fields label,
  .progress-list small,
  .promise p,
  .public-job-body section>p,
  .public-product .add-to-cart,
  .public-product p,
  .reference-summary strong,
  .resend-line,
  .resend-line button,
  .review-section button,
  .route li,
  .search-field,
  .section-view-all,
  .settings-error,
  .settings-photo-actions .button,
  .settings-saved,
  .settlement-mode button,
  .settlement-offset,
  .settlement-totals span,
  .shop-method-badge,
  .shop-preview-more,
  .shop-result-count,
  .shop-tile-go,
  .shop-tile-meta,
  .site-nav-caret,
  .split-preview,
  .status-admin-link,
  .status-card label span,
  .step-kicker,
  .success-links .text-link,
  .verified,
  .view-site:after,
  td { font-size: 12px !important }

  /* TYPE-FLOOR-END */

  /* ---- Anything you tap ------------------------------------------------
   * 44px is the usual floor for a fingertip. Applied to the controls the
   * audit found under it, not blanket-applied to every link on the page.
   */

  .sidebar-toggle, .portal-menu, .business-menu {
    display: grid !important; place-items: center !important;
    width: 44px !important; height: 44px !important;
    margin-right: 6px !important; margin-left: -8px !important;
    font-size: 21px !important; line-height: 1 !important;
  }

  .site-nav-signin, .site-nav a, .main-nav a, .header-actions a,
  .arrow-link, .back-link, .account-link, .review-link, .invoice-action,
  .view-account, .product-edit-button, .via-masjid, .business-name-link,
  .forgot-password-link, .setup-password, .card-meta .card-link,
  .shop-invoice-link, .listing-payment-link,
  .legal-toc a, body > footer a, body > footer > div a,
  .pagination a, .pagination button, .login-alt a, .signup-alt a {
    display: inline-flex !important; align-items: center !important;
    min-height: 40px !important; font-size: 12.5px !important;
    /* inline-flex shrink-wraps to max-content, which for a long label is wider
     * than the phone. Without this the element silently widens the page. */
    max-width: 100% !important;
  }

  /* The brand lock-up is already a comfortable target and is laid out as a flex
   * row at a fixed size. Giving it height is fine; changing its display is not —
   * as inline-flex it shrink-wraps to ~400px and forces the page wider. */
  .brand { min-height: 42px !important; max-width: 100% !important }

  /* Inline links inside a sentence must not become 40px tall blocks — the
   * rule above is for standalone controls, and prose links stay prose. A link
   * in the middle of a paragraph is read, not aimed at, so its hit area is the
   * line it sits on and forcing it taller would just break the paragraph. */
  p a, li a, .legal-content a, td a, small a {
    display: inline !important; min-height: 0 !important; font-size: inherit !important;
  }

  /* Standalone links that sit under a form and act as the way out of it. */
  .login-admin a, .signup-footnote a, .advertising-panel > header a,
  .profile-panel > header button, .invoice-panel > header button {
    display: inline-flex !important; align-items: center !important; min-height: 40px !important;
  }

  /* The payments workspace builds its tabs in JS with an inline font-size, so
   * this needs !important to reach them — an author !important outranks an
   * inline declaration that has none. */
  .payment-workspace-tabs button { font-size: 11.5px !important; min-height: 44px !important }

  .review-link, .invoice-action, .view-account, .product-edit-button {
    padding: 8px 10px !important; margin: -8px -10px !important;
  }

  input[type=checkbox], input[type=radio] {
    width: 20px !important; height: 20px !important; flex: 0 0 auto !important;
  }

  select, input[type=date], input[type=time] { min-height: 44px !important }

  button, .button, .chip, .filter-chips > * {
    min-height: 40px !important;
  }

  /* Close buttons are small squares by design; give them a hit area anyway. */
  .review-drawer > header button, .profile-drawer > header button,
  .job-drawer > header button, .invoice-modal header button,
  #close-public-job { width: 44px !important; height: 44px !important; font-size: 24px !important }

  /* ---- Typing --------------------------------------------------------
   * Safari on iOS zooms the page in when a focused field is under 16px and
   * does not zoom back out. 16px is the only reliable way to prevent it.
   */

  input[type=text], input[type=email], input[type=tel], input[type=password],
  input[type=number], input[type=search], input[type=url], input:not([type]),
  textarea, select, .business-fields input, .business-fields select,
  .business-fields textarea, .admin-search input, .field-row input,
  .field-row select { font-size: 16px !important }

  /* ---- Wide content ---------------------------------------------------
   * The tables already sit in overflow-x:auto wrappers, so they scroll. What
   * they lack is any sign that they do, and momentum scrolling on iOS.
   */

  .table-wrap, .invoice-table, [class*="table"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .table-wrap table, .invoice-table table { min-width: 100% }

  /* A soft fade at the right edge says "there is more this way". It sits
   * behind nothing interactive, so it cannot swallow a tap. */
  .table-wrap { position: relative }
  .table-wrap:after {
    content: ""; position: sticky; float: right; top: 0; right: 0;
    width: 24px; height: 100%; margin-left: -24px; pointer-events: none;
    background: linear-gradient(to right, rgba(255,253,248,0), rgba(255,253,248,.92));
  }

  /* ---- Rhythm ---------------------------------------------------------
   * Denser padding wastes phone width; too little makes text touch the edge.
   */

  .dashboard-content, .business-content, .portal-content { padding: 24px 16px !important }
  .panel-header, .advertising-panel > header, .profile-panel > header,
  .invoice-panel > header { padding: 16px !important }
  .drawer-body, .profile-form-body { padding: 18px 16px !important }
  .review-drawer > header, .profile-drawer > header { padding: 18px 16px !important }
  .review-drawer > footer, .profile-drawer form > footer { padding: 14px 16px !important }

  /* Drawer footers stack rather than squeeze two buttons into a phone width. */
  .review-drawer > footer, .profile-drawer form > footer {
    flex-direction: column-reverse !important;
  }
  .review-drawer > footer > *, .profile-drawer form > footer > * { width: 100% !important }

  /* The footer link row is a flex line with no wrap, so its seven links have a
   * min-content width of about 400px and hold the whole page open past the
   * edge of the screen. It is a grid item too, and a 1fr track cannot shrink
   * below its content unless min-width is released. */
  body > footer > div {
    flex-wrap: wrap !important;
    gap: 2px 18px !important;
    min-width: 0 !important;
  }
  body > footer { min-width: 0 }
  body > footer > * { min-width: 0; max-width: 100% }

  /* A toast pinned to a corner clips on a narrow screen. */
  .toast {
    left: 16px !important; right: 16px !important; bottom: 16px !important;
    font-size: 12.5px !important; text-align: center;
  }
}