/* R36 M1: shared reading and touch sizes for phones and portrait tablets.
   Load after the authored page styles. Larger leads, titles, prices and card
   headings keep their authored sizes. Section rhythm lives in mobile-layout-r36.css. */
:root {
  --pc-body-min: 16px;
  --pc-tap-min: 44px;
}

@media screen and (max-width: 768px) {
  /* These components were authored below 16 px at the audited mobile widths.
     The body class adds specificity for legal.css, which loads in the body. */
  html body[class] :is(
    .skip-link,
    .button,
    .button-dark,
    .button-outline,
    .text-link,
    .hero-login-pill,
    .login-menu a,
    .nav-links a,
    .role-link,
    .who-link,
    .level-card-link,
    .info-topics a,
    .faq-topics a,
    .faq-list summary,
    .faq-list details p,
    .hero-support,
    .hero-pill,
    .fine,
    .stage-note,
    .step-note,
    .screen-note,
    .shots-note,
    .footage-disclosure,
    .club-card figcaption,
    .store-button small,
    .feature-grid span,
    .feature-grid small,
    .comparison-status,
    .comparison-photo > span,
    .founder-name > span,
    .loop-pill,
    .loop-note,
    .loop2-card-num,
    .hero-points li,
    .quadrant p,
    .level-card p,
    .hero-facts dt,
    .hero-facts dd,
    .install-text,
    .club-feature-grid li,
    .highlight-caption,
    .closing-line,
    .role-text,
    .cause-kicker,
    .cause-point p,
    .cause-community cite,
    .cause-community cite strong,
    .partner-1013 .step p,
    .control-label,
    .control-note,
    .plan-text,
    .plan-flag,
    .plan-saving,
    .plan-perks li,
    .plan-perks small,
    .price-unit,
    .price-was,
    .price-period,
    .price-total,
    .saving-pill,
    .save-badge,
    .extra-card p,
    .calc-head p,
    .courts-label,
    .courts-help,
    .calc-input-note,
    .camera-pill,
    .camera-offer-text,
    .calc-label,
    .calc-total span,
    .calc-rate,
    .calc-plan,
    .calc-result .sr-only,
    .club-terms-note,
    .finder-results-heading p,
    .finder-empty p,
    .finder-invitation p,
    .finder-static-note,
    .globe-feedback,
    .globe-bottom figcaption,
    .who-card li,
    .reach-contact p,
    .reach-card p,
    .field label,
    .role-fields legend,
    .field-help,
    .check-field label,
    .form-heading p,
    .form-note,
    .form-status,
    .legal-page .dates,
    .legal-toc ol,
    .legal-content table,
    .legal-content th,
    .legal-content code,
    .legal-content .company-facts dt,
    .legal-related,
    .preference-panel p,
    .preference-panel [data-preference-status],
    .thanks-card .eyebrow,
    .detail-page .info-hero > p:not(.lead),
    .footer-tagline,
    .footer-rhythm,
    .footer-links h3,
    .footer-links strong,
    .footer-links a,
    .footer-bottom,
    video
  ) {
    font-size: var(--pc-body-min);
  }

  /* Native form fields retain the Outfit face and avoid mobile input zoom. */
  html body .contact-form :is(input:not([type="checkbox"]), select, textarea) {
    font-size: var(--pc-body-min);
    min-height: var(--pc-tap-min);
    min-width: var(--pc-tap-min);
  }

  /* Explicit shared action and media control families retain their visual style. */
  html body :is(
    .button,
    .button-dark,
    .button-outline,
    .text-link,
    .skip-link,
    .brand,
    .hero-login-pill,
    .role-link,
    .who-link,
    .level-card-link,
    .stage-control,
    .shots-control,
    .camera-switch,
    .courts-step,
    .faq-more-toggle,
    .nav-toggle,
    .nav-login-toggle,
    .login-menu a,
    .info-topics a,
    .faq-topics a,
    .preference-panel button
  ) {
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
  }

  html body :is(.stage-control, .shots-control, .camera-switch),
  html body :is(.currency-switch, .pill-switch, .finder-regions, .globe-controls) button {
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
    font-size: var(--pc-body-min);
  }

  /* Prose links get their own visible, nonoverlapping target. Long legal names
     wrap inside the reading column, including links inside table cells. */
  html body main :is(p, li, dd, td) a:not(.button):not(.button-dark):not(.button-outline):not(.text-link):not(.role-link):not(.who-link):not(.store-button):not(.hero-login-pill):not(.level-card-link),
  html body .legal-related a {
    display: inline-block;
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
    max-width: 100%;
    padding-block: 10px;
    vertical-align: baseline;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  html body :is(.faq-list, .legal-toc) summary {
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
  }

  /* Associated labels remain the effective checkbox targets. Keep the native
     checkbox appearance, checked state and keyboard focus treatment. */
  html body .check-field label {
    display: block;
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
    cursor: pointer;
  }

  /* Footer links are separate rows in a consistent two-column reading rhythm. */
  html body .site-footer {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  html body .footer-top {
    flex-direction: column;
    gap: 32px;
    padding-bottom: 32px;
  }
  html body .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
    width: 100%;
  }
  html body .footer-links > div {
    min-width: 0;
    gap: 4px;
  }
  html body :is(.footer-links a, .footer-bottom a) {
    display: flex;
    align-items: center;
    min-width: var(--pc-tap-min);
    min-height: var(--pc-tap-min);
    padding-block: 8px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  html body .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    line-height: 1.6;
  }
  html body .footer-bottom > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  html body[class] :is(.hero-pill, .preference-panel p, .sr-only, .login-menu a) { font-size: var(--pc-body-min); }
  html body .currency-switch button[data-currency] { min-height: var(--pc-tap-min); font-size: var(--pc-body-min); }
}

@media screen and (max-width: 768px) {
  html body .who-card .who-link { min-height: var(--pc-tap-min); }
}

@media screen and (max-width: 768px) {
  /* WebKit's native select ignores the minimum height until its appearance is authored. */
  html body .contact-form select {
    -webkit-appearance: none;
    appearance: none;
    height: var(--pc-tap-min);
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23acb9d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-size: 18px 18px;
    background-repeat: no-repeat;
  }
}