/* Compact access flow for phones and narrow browser layouts.
   Keep the particle story measurable: login-particles.js needs both dimensions >= 100 CSS px. */
@media (max-width: 1100px) {
  .access-outer { display: flex; flex-direction: column; min-height: 100dvh; padding: 0; background: #080808; }
  .access-page { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; background: #080808; color: #f5f5f5; }
  .access-page .access-top {
    padding: max(.875rem, env(safe-area-inset-top, 0rem)) 1.25rem .875rem;
    gap: .75rem;
  }
  .access-page .access-top .team-id { display: none; }
  .access-page .access-top .brand-name { font-size: .875rem; }
  .access-page .access-top .brand-mark { width: 2.25rem; height: 2.5rem; }
  .access-page .access-top .language button { min-width: 3rem; min-height: 3rem; font-size: .8125rem; }

  .access-page .access-main {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: .75rem 0 1rem;
  }
  .access-page .access-story {
    flex: 0 0 6.75rem;
    width: 100%;
    max-width: 30rem;
    height: 6.75rem;
    min-height: 6.75rem;
    margin: 0 auto;
    padding: .625rem 1.5rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: transparent;
  }
  .access-page .access-story .access-season, .access-page .access-story::after { display: none; }
  .access-page .access-story .access-hero {
    margin: 0 auto;
    max-width: 100%;
  }
  .access-page .access-hero h1 {
    font-size: clamp(1.875rem, 9vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -.0875rem;
  }
  .access-page .access-hero h1 span { display: block; }
  .access-page .access-hero h1 span::before { content: none; }

  .access-page .access-form-area {
    width: 100%;
    max-width: 30rem;
    min-height: 0;
    padding: 0 1.5rem 1rem;
    background: transparent;
  }
  .access-page .access-modes { margin: 0; }
  .access-page .access-modes button { min-height: 3.25rem; padding: .75rem .5rem; gap: .5rem; font-size: .875rem; }
  .access-page .access-modes svg { width: 1rem; height: 1rem; }
  .access-page .access-heading { margin: 1.0625rem 0 .9375rem; }
  .access-page .access-heading h2 { font-size: 1.4375rem; line-height: 1.25; }
  .access-page #auth-form .field { margin-bottom: .875rem; }
  .access-page #auth-form .field label { margin-bottom: .375rem; font-size: .875rem; }
  .access-page #auth-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    min-height: 3.25rem;
    font-size: 1rem;
  }
  .access-page #auth-form .input-wrap input { height: 3.25rem; padding: 0 3.5rem 0 2.875rem; border-radius: .875rem; }
  .access-page #auth-form .input-wrap > .field-icon { top: 1rem; left: 1rem; width: 1.25rem; height: 1.25rem; }
  .access-page #auth-form .password-eye { top: .125rem; right: .125rem; width: 3rem; height: 3rem; }
  .access-page #auth-form .password-eye svg { width: 1.0625rem; height: 1.0625rem; }
  .access-page .access-submit.button.primary { min-height: 3.25rem; padding: .875rem 1.125rem; border-radius: .875rem; font-size: 1rem; }
  .access-page .access-form-area .text-button { min-height: 3rem; margin-top: .4375rem; padding: .625rem; font-size: .9375rem; }
  .access-page :is(.access-note, .access-account, .access-error, .success-copy) { font-size: .875rem; }
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-heading:has(#access-title) {
    position: static; width: auto; height: auto; margin: 1.0625rem 0 .9375rem;
    padding: 0; overflow: visible; clip-path: none; white-space: normal;
  }
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-modes { margin-bottom: 0; }

  .access-page .access-bottom.login-brand-footer {
    width: 100%;
    max-width: 30rem;
    margin: auto auto 0;
    padding: 1rem 1.5rem max(1.25rem, env(safe-area-inset-bottom, 0rem));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9375rem 1.5rem;
    justify-items: center;
    align-items: center;
  }
  .access-page .login-brand-footer .login-slogan {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 20rem);
    margin: 0;
    font-size: clamp(.8125rem, 3.8vw, 1rem);
    line-height: 1.45;
    white-space: normal;
    text-align: center;
  }
  .access-page .login-brand-footer .login-footer-domus {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 7.25rem);
    height: auto;
    max-height: none;
  }
  .access-page .login-brand-footer .login-footer-biobuzz {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 9.375rem);
    height: auto;
    max-height: none;
  }
}

@media (max-width: 600px) {
  /* The login title is useful once the tabs, logo and fields are close together. */
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-heading:has(#access-title) {
    position: static;
    width: auto;
    height: auto;
    margin: 1.0625rem 0 .9375rem;
    padding: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-modes { margin-bottom: 0; }
}

@media (max-width: 380px) {
  .access-page .access-top { padding-inline: 1rem; }
  .access-page .access-top .wordmark { gap: .5rem; }
  .access-page .access-top .brand-name { font-size: .75rem; }
  .access-page .access-form-area { padding-inline: 1.25rem; }
  .access-page .access-bottom.login-brand-footer { padding-inline: 1.25rem; gap: .875rem; }
}

/* av-phone-layout mirror: generated from the first media block. */
html.av-phone-layout .access-outer { display: flex; flex-direction: column; min-height: 100dvh; padding: 0; background: #080808; }
html.av-phone-layout .access-page { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-height: 100dvh; border-radius: 0; box-shadow: none; background: #080808; color: #f5f5f5; }
html.av-phone-layout .access-page .access-top { padding: max(.875rem, env(safe-area-inset-top, 0rem)) 1.25rem .875rem;
    gap: .75rem; }
html.av-phone-layout .access-page .access-top .team-id { display: none; }
html.av-phone-layout .access-page .access-top .brand-name { font-size: .875rem; }
html.av-phone-layout .access-page .access-top .brand-mark { width: 2.25rem; height: 2.5rem; }
html.av-phone-layout .access-page .access-top .language button { min-width: 3rem; min-height: 3rem; font-size: .8125rem; }
html.av-phone-layout .access-page .access-main { flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: .75rem 0 1rem; }
html.av-phone-layout .access-page .access-story { flex: 0 0 6.75rem;
    width: 100%;
    max-width: 30rem;
    height: 6.75rem;
    min-height: 6.75rem;
    margin: 0 auto;
    padding: .625rem 1.5rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: transparent; }
html.av-phone-layout .access-page .access-story .access-season,
html.av-phone-layout .access-page .access-story::after { display: none; }
html.av-phone-layout .access-page .access-story .access-hero { margin: 0 auto;
    max-width: 100%; }
html.av-phone-layout .access-page .access-hero h1 { font-size: clamp(1.875rem, 9vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -.0875rem; }
html.av-phone-layout .access-page .access-hero h1 span { display: block; }
html.av-phone-layout .access-page .access-hero h1 span::before { content: none; }
html.av-phone-layout .access-page .access-form-area { width: 100%;
    max-width: 30rem;
    min-height: 0;
    padding: 0 1.5rem 1rem;
    background: transparent; }
html.av-phone-layout .access-page .access-modes { margin: 0; }
html.av-phone-layout .access-page .access-modes button { min-height: 3.25rem; padding: .75rem .5rem; gap: .5rem; font-size: .875rem; }
html.av-phone-layout .access-page .access-modes svg { width: 1rem; height: 1rem; }
html.av-phone-layout .access-page .access-heading { margin: 1.0625rem 0 .9375rem; }
html.av-phone-layout .access-page .access-heading h2 { font-size: 1.4375rem; line-height: 1.25; }
html.av-phone-layout .access-page #auth-form .field { margin-bottom: .875rem; }
html.av-phone-layout .access-page #auth-form .field label { margin-bottom: .375rem; font-size: .875rem; }
html.av-phone-layout .access-page #auth-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 3.25rem;
    font-size: 1rem; }
html.av-phone-layout .access-page #auth-form .input-wrap input { height: 3.25rem; padding: 0 3.5rem 0 2.875rem; border-radius: .875rem; }
html.av-phone-layout .access-page #auth-form .input-wrap > .field-icon { top: 1rem; left: 1rem; width: 1.25rem; height: 1.25rem; }
html.av-phone-layout .access-page #auth-form .password-eye { top: .125rem; right: .125rem; width: 3rem; height: 3rem; }
html.av-phone-layout .access-page #auth-form .password-eye svg { width: 1.0625rem; height: 1.0625rem; }
html.av-phone-layout .access-page .access-submit.button.primary { min-height: 3.25rem; padding: .875rem 1.125rem; border-radius: .875rem; font-size: 1rem; }
html.av-phone-layout .access-page .access-form-area .text-button { min-height: 3rem; margin-top: .4375rem; padding: .625rem; font-size: .9375rem; }
html.av-phone-layout .access-page :is(.access-note, .access-account, .access-error, .success-copy) { font-size: .875rem; }
html.av-phone-layout .access-page:has(#auth-form input[autocomplete="current-password"]) .access-heading:has(#access-title) { position: static; width: auto; height: auto; margin: 1.0625rem 0 .9375rem;
    padding: 0; overflow: visible; clip-path: none; white-space: normal; }
html.av-phone-layout .access-page:has(#auth-form input[autocomplete="current-password"]) .access-modes { margin-bottom: 0; }
html.av-phone-layout .access-page .access-bottom.login-brand-footer { width: 100%;
    max-width: 30rem;
    margin: auto auto 0;
    padding: 1rem 1.5rem max(1.25rem, env(safe-area-inset-bottom, 0rem));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9375rem 1.5rem;
    justify-items: center;
    align-items: center; }
html.av-phone-layout .access-page .login-brand-footer .login-slogan { grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 20rem);
    margin: 0;
    font-size: clamp(.8125rem, 3.8vw, 1rem);
    line-height: 1.45;
    white-space: normal;
    text-align: center; }
html.av-phone-layout .access-page .login-brand-footer .login-footer-domus { grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 7.25rem);
    height: auto;
    max-height: none; }
html.av-phone-layout .access-page .login-brand-footer .login-footer-biobuzz { grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 9.375rem);
    height: auto;
    max-height: none; }
/* End av-phone-layout mirror. */

/* Center the existing identity independently of the language control. */
@media (max-width: 1100px) {
  .access-page .access-top { display: grid; grid-template-columns: minmax(3rem, 1fr) auto minmax(3rem, 1fr); align-items: center; }
  .access-page .access-top .wordmark { grid-column: 2; justify-self: center; min-width: 0; }
  .access-page .access-top .language { grid-column: 3; justify-self: end; }
}
html.av-phone-layout .access-page .access-top { display: grid; grid-template-columns: minmax(3rem, 1fr) auto minmax(3rem, 1fr); align-items: center; }
html.av-phone-layout .access-page .access-top .wordmark { grid-column: 2; justify-self: center; min-width: 0; }
html.av-phone-layout .access-page .access-top .language { grid-column: 3; justify-self: end; }