/* EOTF mobile fluid typography v1
   Uses both viewport height and width so tall phones use their free space,
   while compact phones retain the existing one-screen safety layout. */

@media (max-width: 680px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* iOS zooms the whole page when a focused field is below 16px.
     Keeping form controls at 16px prevents that layout jump. */
  .public-shell input,
  .public-shell select,
  .public-shell textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 680px) and (min-height: 741px) {
  :root {
    --eotf-mf-xxs: clamp(6.5px, min(2vw, calc(-1.25px + 1.05dvh)), 8.5px);
    --eotf-mf-control: clamp(8px, min(2.4vw, calc(-1.5px + 1.25dvh)), 10.25px);
    --eotf-mf-body: clamp(9px, min(2.75vw, calc(-1.2px + 1.35dvh)), 11.5px);
    --eotf-mf-body-lg: clamp(
      10.5px,
      min(3.15vw, calc(-1.25px + 1.55dvh)),
      13.25px
    );
    --eotf-mf-card-title: clamp(
      11.5px,
      min(3.55vw, calc(-0.5px + 1.6dvh)),
      14.5px
    );
    --eotf-mf-heading: clamp(28px, min(8.5vw, calc(2px + 3.5dvh)), 36px);
    --eotf-mf-gap: clamp(6px, 0.9dvh, 9px);
  }

  /* Shared chrome and navigation. */
  .kicker {
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.3 !important;
  }

  .controls > p {
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.15 !important;
  }

  .controls > div {
    font-size: var(--eotf-mf-control) !important;
  }

  .controls > div b {
    font-size: clamp(12px, min(3.5vw, calc(1px + 1.55dvh)), 15px) !important;
  }

  .nav-overlay nav small {
    font-size: var(--eotf-mf-control) !important;
  }

  .nav-overlay nav span {
    font-size: clamp(15px, min(4.3vw, calc(3px + 1.75dvh)), 18px) !important;
    line-height: 1.08 !important;
  }

  .nav-overlay > footer {
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.3 !important;
  }

  /* Home. */
  .hero {
    padding-top: clamp(12px, 1.65dvh, 16px) !important;
    padding-bottom: clamp(82px, 9.8dvh, 92px) !important;
  }

  .hero-identity {
    gap: clamp(8px, 1.15dvh, 11px) !important;
  }

  .hero-identity img.eotf-theme-logo,
  .hero-identity img {
    width: clamp(190px, 55vw, 250px) !important;
  }

  .hero-identity strong {
    font-size: clamp(17px, min(5vw, calc(2px + 2dvh)), 21.5px) !important;
    line-height: 1.08 !important;
  }

  .hero-copy > p {
    width: min(88vw, 370px) !important;
    max-width: min(88vw, 370px) !important;
    margin-top: clamp(10px, 1.35dvh, 13px) !important;
    font-size: var(--eotf-mf-body-lg) !important;
    line-height: 1.46 !important;
  }

  .hero .actions {
    width: min(72vw, 276px) !important;
    max-width: min(72vw, 276px) !important;
    margin-top: clamp(9px, 1.2dvh, 12px) !important;
    gap: clamp(5px, 0.7dvh, 7px) !important;
  }

  .hero .actions .button {
    min-height: clamp(32px, calc(3px + 3.6dvh), 37px) !important;
    height: clamp(32px, calc(3px + 3.6dvh), 37px) !important;
    max-height: 37px !important;
    flex-basis: clamp(32px, calc(3px + 3.6dvh), 37px) !important;
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.08 !important;
  }

  .hero-metrics {
    height: clamp(56px, calc(7px + 6.2dvh), 65px) !important;
  }

  .hero-metrics .metric {
    gap: clamp(3px, 0.45dvh, 5px) !important;
  }

  .hero-metrics .metric strong {
    font-size: clamp(15px, min(4.4vw, calc(1px + 1.9dvh)), 19px) !important;
  }

  .hero-metrics .metric span {
    font-size: var(--eotf-mf-xxs) !important;
    line-height: 1.2 !important;
  }

  /* About. */
  .club-about {
    gap: clamp(9px, 1.25dvh, 12px) !important;
  }

  .club-about h2 {
    font-size: clamp(34px, min(9.4vw, calc(3px + 3.9dvh)), 40px) !important;
    line-height: 0.98 !important;
  }

  .club-about-lead {
    font-size: var(--eotf-mf-body-lg) !important;
    line-height: 1.52 !important;
  }

  .about-tabs {
    margin-top: clamp(8px, 1.1dvh, 11px) !important;
  }

  .about-tabs button {
    height: clamp(31px, calc(3px + 3.65dvh), 36px) !important;
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.15 !important;
  }

  .about-tabs button span {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .about-panel {
    min-height: clamp(138px, 18dvh, 166px) !important;
    height: clamp(138px, 18dvh, 166px) !important;
    padding: clamp(10px, 1.45dvh, 14px) !important;
  }

  .about-panel small {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .about-panel h3 {
    font-size: var(--eotf-mf-card-title) !important;
    line-height: 1.18 !important;
  }

  .about-panel p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.48 !important;
  }

  .system-orbit > b small,
  .system-orbit > span,
  .format-grid span,
  .club-system > p {
    font-size: var(--eotf-mf-xxs) !important;
    line-height: 1.25 !important;
  }

  .format-grid b {
    font-size: clamp(12px, min(3.6vw, calc(1px + 1.55dvh)), 15px) !important;
  }

  /* Program and outcomes. */
  .club-program,
  .club-results {
    gap: var(--eotf-mf-gap) !important;
    padding-top: clamp(13px, 1.75dvh, 17px) !important;
    padding-bottom: clamp(13px, 1.75dvh, 17px) !important;
  }

  .club-program .compact-heading h2,
  .club-results .compact-heading h2 {
    font-size: var(--eotf-mf-heading) !important;
    line-height: 0.98 !important;
  }

  .club-program .compact-heading p,
  .club-results .compact-heading p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.42 !important;
  }

  .club-area-grid {
    gap: clamp(4px, 0.7dvh, 7px) !important;
  }

  .club-area-grid article,
  .club-area-grid article:last-child {
    padding: clamp(6px, 1dvh, 10px) !important;
  }

  .club-area-grid header small,
  .club-area-grid header > div span {
    font-size: var(--eotf-mf-xxs) !important;
    line-height: 1.18 !important;
  }

  .club-area-grid header > div b {
    font-size: clamp(15px, min(4.2vw, calc(1px + 1.85dvh)), 18px) !important;
  }

  .club-area-grid h3 {
    margin: clamp(5px, 0.75dvh, 7px) 0 4px !important;
    font-size: var(--eotf-mf-card-title) !important;
    line-height: 1.16 !important;
  }

  .club-area-grid > article > p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.38 !important;
  }

  .club-area-grid footer {
    margin-top: clamp(4px, 0.65dvh, 6px) !important;
    padding-top: clamp(4px, 0.65dvh, 6px) !important;
  }

  .club-area-grid footer span {
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.2 !important;
  }

  .outcome-grid {
    gap: clamp(4px, 0.7dvh, 7px) !important;
  }

  .outcome-grid article {
    padding: clamp(8px, 1.1dvh, 11px) !important;
  }

  .outcome-grid small {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .outcome-grid i {
    margin: clamp(6px, 0.8dvh, 8px) 0 !important;
  }

  .outcome-grid h3 {
    margin-bottom: clamp(5px, 0.7dvh, 7px) !important;
    font-size: var(--eotf-mf-card-title) !important;
    line-height: 1.16 !important;
  }

  .outcome-grid p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.38 !important;
  }

  /* Registration. */
  .registration-view {
    gap: clamp(8px, 1.25dvh, 12px) !important;
    padding-top: clamp(13px, 1.7dvh, 16px) !important;
    padding-bottom: clamp(13px, 1.7dvh, 16px) !important;
  }

  .registration-copy h2 {
    font-size: var(--eotf-mf-heading) !important;
    line-height: 0.98 !important;
  }

  .registration-status {
    margin-top: clamp(7px, 0.95dvh, 9px) !important;
    padding: clamp(7px, 1dvh, 9px) clamp(9px, 1.25dvh, 12px) !important;
  }

  .registration-status small,
  .registration-copy dt,
  .registration-fields label > span {
    font-size: var(--eotf-mf-xxs) !important;
    line-height: 1.2 !important;
  }

  .registration-status b,
  .registration-status span,
  .registration-copy dd,
  .registration-form > header span,
  .registration-form > header b {
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.25 !important;
  }

  .registration-copy dl div {
    padding: clamp(5px, 0.8dvh, 8px) !important;
  }

  .registration-form {
    padding: clamp(9px, 1.45dvh, 14px) !important;
  }

  .registration-fields {
    gap: clamp(5px, 0.75dvh, 8px) clamp(7px, 1dvh, 10px) !important;
    margin-top: clamp(7px, 1dvh, 10px) !important;
  }

  .registration-fields input,
  .registration-fields select {
    height: clamp(31px, calc(2px + 3.8dvh), 38px) !important;
    padding-inline: clamp(7px, 2vw, 10px) !important;
    font-size: 16px !important;
  }

  .registration-consent {
    margin-top: clamp(6px, 0.9dvh, 9px) !important;
    font-size: var(--eotf-mf-control) !important;
    line-height: 1.32 !important;
  }

  .registration-submit {
    min-height: clamp(34px, calc(3px + 3.8dvh), 40px) !important;
    margin-top: clamp(6px, 0.9dvh, 9px) !important;
    font-size: var(--eotf-mf-control) !important;
  }

  .registration-error,
  .registration-message p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.4 !important;
  }

  .registration-message h3 {
    font-size: var(--eotf-mf-heading) !important;
  }

  /* Graduates. */
  .registry.eotf-mobile-graduates-active > header h2 {
    font-size: clamp(34px, min(10.5vw, calc(4px + 4.4dvh)), 46px) !important;
  }

  .registry.eotf-mobile-graduates-active > header label {
    min-height: clamp(40px, calc(4px + 4.3dvh), 44px) !important;
  }

  .registry.eotf-mobile-graduates-active > header input,
  .registry.eotf-mobile-graduates-active > header label span {
    font-size: var(--eotf-mf-control) !important;
  }

  .registry.eotf-mobile-graduates-active > header input {
    font-size: 16px !important;
  }

  .eotf-mobile-grad-caption {
    min-height: clamp(56px, 7.8dvh, 72px) !important;
    padding: clamp(8px, 1.05dvh, 10px) !important;
  }

  .eotf-mobile-grad-caption h3 {
    font-size: clamp(12px, min(4.1vw, calc(-1px + 1.9dvh)), 17px) !important;
    line-height: 1.1 !important;
  }

  .eotf-mobile-grad-caption p {
    font-size: var(--eotf-mf-body) !important;
  }

  .eotf-mobile-grad-pager span {
    font-size: var(--eotf-mf-control) !important;
  }

  /* Credential lookup. */
  .lookup {
    gap: clamp(8px, 1.15dvh, 11px) !important;
    padding: clamp(9px, 1.3dvh, 12px) !important;
  }

  .credential-story {
    padding: clamp(10px, 1.45dvh, 14px) !important;
  }

  .credential-story > h2 {
    font-size: clamp(24px, min(7.6vw, calc(2px + 3.25dvh)), 33px) !important;
    line-height: 1 !important;
  }

  .credential-story > div {
    gap: clamp(5px, 0.75dvh, 8px) !important;
  }

  .credential-story p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.42 !important;
  }

  .verification-panel {
    padding: clamp(10px, 1.45dvh, 14px) !important;
  }

  .verification-panel > h2 {
    font-size: var(--eotf-mf-heading) !important;
    line-height: 0.98 !important;
  }

  .verification-panel > p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.38 !important;
  }

  .verification-panel form > label,
  .scanner-compact .scanner-content span {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .verification-panel form input {
    height: clamp(31px, calc(2px + 3.8dvh), 38px) !important;
    font-size: 16px !important;
  }

  .verification-panel form .button,
  .verification-panel .sample {
    min-height: clamp(31px, calc(2px + 3.8dvh), 38px) !important;
    font-size: var(--eotf-mf-control) !important;
  }

  /* Learning-area modal. */
  .area-modal {
    padding: clamp(16px, 2.4dvh, 22px) !important;
  }

  .area-modal h2 {
    font-size: var(--eotf-mf-heading) !important;
  }

  .area-modal > p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.42 !important;
  }

  .area-modal ol {
    gap: clamp(5px, 0.75dvh, 8px) !important;
  }

  .area-modal li {
    padding: clamp(7px, 1dvh, 10px) !important;
  }

  .area-modal li > span {
    font-size: var(--eotf-mf-control) !important;
  }

  .area-modal li > p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.36 !important;
  }

  /* Credential detail screens. */
  .person h2 {
    font-size: clamp(25px, min(8.3vw, calc(2px + 3.55dvh)), 36px) !important;
  }

  .person p,
  .facts b,
  .summary > div > p,
  .doc-actions > p {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.35 !important;
  }

  .status.large,
  .facts span,
  .summary > aside small {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .academic > header .kicker,
  .academic > header > span {
    font-size: var(--eotf-mf-control) !important;
  }

  .academic > header h2 {
    font-size: clamp(24px, min(7.4vw, calc(3px + 2.9dvh)), 31px) !important;
  }

  .record-row {
    grid-template-columns: 24px minmax(0, 0.92fr) minmax(0, 1.58fr) 30px 34px !important;
  }

  .record-row > span {
    font-size: clamp(6px, min(2.2vw, calc(-1.2px + 1.05dvh)), 9.5px) !important;
    line-height: 1.12 !important;
  }

  .record-row > b {
    font-size: clamp(
      6.8px,
      min(2.55vw, calc(-1.1px + 1.25dvh)),
      11px
    ) !important;
    line-height: 1.12 !important;
  }

  .record-head > span {
    font-size: clamp(
      5.5px,
      min(1.85vw, calc(-1px + 0.95dvh)),
      7.5px
    ) !important;
    line-height: 1.08 !important;
  }

  .summary h2,
  .doc-actions h2 {
    font-size: var(--eotf-mf-heading) !important;
  }

  .summary .metric > span,
  .share button,
  .share a {
    font-size: var(--eotf-mf-control) !important;
  }

  .summary .metric strong {
    font-size: clamp(18px, min(5vw, calc(2px + 2dvh)), 22px) !important;
  }

  .qr-actions .button {
    font-size: var(--eotf-mf-control) !important;
  }

  /* The opened graduate card is also fluid, but only on screens with room. */
  .eotf-single-card {
    padding: clamp(14px, 1.9dvh, 18px) clamp(12px, 3.3vw, 16px) !important;
    gap: clamp(10px, 1.45dvh, 14px) !important;
    overflow: hidden !important;
  }

  .eotf-single-photo {
    height: clamp(160px, 25dvh, 230px) !important;
  }

  .eotf-single-kicker,
  .eotf-single-meta small,
  .eotf-transcript-lang > small {
    font-size: var(--eotf-mf-xxs) !important;
  }

  .eotf-single-name {
    font-size: clamp(23px, min(8vw, calc(1px + 3.7dvh)), 36px) !important;
  }

  .eotf-single-meta div {
    min-height: clamp(58px, 7.2dvh, 66px) !important;
  }

  .eotf-single-meta b {
    font-size: clamp(15px, min(4.4vw, calc(2px + 1.8dvh)), 19px) !important;
  }

  .eotf-transcript-lang button,
  .eotf-single-actions a,
  .eotf-single-actions button {
    font-size: var(--eotf-mf-body) !important;
  }

  .eotf-single-actions a,
  .eotf-single-actions button {
    min-height: clamp(40px, calc(5px + 4.3dvh), 45px) !important;
  }

  .eotf-single-note {
    font-size: var(--eotf-mf-body) !important;
    line-height: 1.35 !important;
  }
}