/* v32 accessibility, compact authentication and cache-safe UI fixes.
   The filing footer and its spacing remain owned by guanyao.css. */

.password-reset-match,
.password-confirm-hint {
  min-height: 1.1em;
  margin: -.2rem 0 0;
  font-size: .8rem;
  line-height: 1.15;
}
.password-reset-match.is-valid,
.password-confirm-hint.valid { color: #18745b; }
.password-reset-match.is-invalid,
.password-confirm-hint.invalid { color: #ad3932; }

/* Registration must fit a short 720px viewport without hiding its action. */
.auth-dialog {
  width: min(calc(100vw - 12px), 430px);
  max-height: calc(100dvh - 12px);
  border-radius: 14px;
}
.auth-dialog .auth-shell {
  max-height: calc(100dvh - 12px);
  overflow-y: auto;
  padding: 0 14px 10px;
}
.auth-dialog .auth-shell > header {
  min-height: 50px;
  margin: 0 -14px 7px;
  padding: 6px 14px;
}
.auth-dialog .auth-shell > header span { font-size: 12px; line-height: 1.1; }
.auth-dialog .auth-shell > header strong { font-size: 20px; line-height: 1.15; }
.auth-dialog .auth-shell > header button { width: 34px; height: 34px; }
.auth-dialog .auth-tabs {
  min-height: 40px;
  margin-bottom: 7px;
  padding: 3px;
}
.auth-dialog .auth-tabs button { padding: 5px; font-size: 16px; }
.auth-dialog .auth-form { gap: 5px; }
.auth-dialog .auth-form label {
  gap: 2px;
  font-size: 15px;
  line-height: 1.15;
}
.auth-dialog .auth-form label small { font-size: 11px; line-height: 1.15; }
.auth-dialog .auth-form input {
  min-height: 34px;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 15px;
}
.auth-dialog .password-checklist {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px 8px;
  margin: 0;
  font-size: 10px;
  line-height: 1.15;
}
.auth-dialog .password-checklist li { min-width: 0; }
.auth-dialog .password-confirm-hint { font-size: 11px; }
.auth-dialog .auth-email-code-row {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 6px;
}
.auth-dialog .auth-email-code-row > label { min-width: 0; }
.auth-dialog .auth-email-code-row button {
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
}
.auth-dialog .password-reset-status,
.auth-dialog .auth-error {
  min-height: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.15;
}
.auth-dialog .password-reset-status:empty,
.auth-dialog .auth-error:empty { display: none; }
.auth-dialog .auth-form .primary-action {
  min-height: 36px;
  margin-top: 2px;
  font-size: 16px;
}

.password-reset-dialog {
  max-height: calc(100dvh - 12px);
  overflow-y: auto;
  border-radius: 14px;
}
.password-reset-dialog header { padding: 8px 12px; }
.password-reset-body { gap: 6px; padding: 8px 12px 10px; }
.password-reset-body label { gap: 2px; line-height: 1.15; }
.password-reset-body input { min-height: 34px; padding: 5px 9px; }
.password-reset-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px 7px;
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
}
.password-reset-error:empty,
.password-reset-status:empty { display: none; }

.setting-control { gap: 12px; min-width: 0; }
.setting-control > span { min-width: 0; }
.setting-control > span strong { overflow-wrap: anywhere; }
.setting-control select {
  width: auto;
  min-width: min(12em, 52vw);
  max-width: 64%;
  text-overflow: ellipsis;
}
.mobile-font-setting { display: flex !important; }

/* Desktop has the same three accessible choices as mobile, at a larger scale. */
@media (min-width: 721px) {
  body { font-size: 16px; }
  body:not([data-desktop-font-size]),
  body[data-desktop-font-size="medium"] { --desktop-ui-base: 21px; }
  body[data-desktop-font-size="small"] { --desktop-ui-base: 19px; }
  body[data-desktop-font-size="large"] { --desktop-ui-base: 23px; }

  main { width: min(980px, 100%); }
  :is(#mainContent, .app-header, .bottom-nav) { font-size: var(--desktop-ui-base); }
  :is(#mainContent, .app-header, .bottom-nav) :is(button, input, select, textarea) {
    font-size: 1em !important;
  }
  :is(
    .time-row, .field, .compact-cast-mode, .number-cast-stage,
    .setting-control, .record-tabs, .panel-heading, .case-card,
    .result-actions, .choice-dialog, .line-dialog
  ) { font-size: var(--desktop-ui-base); }
  :is(
    .time-row, .field, .compact-cast-mode, .number-cast-stage,
    .setting-control, .record-tabs, .panel-heading, .case-card,
    .result-actions, .choice-dialog, .line-dialog
  ) :is(button, input, select, textarea) { font-size: 1em !important; }

  :is(.field small, .case-card-meta, .case-note-preview, .panel-heading p, .site-footer) {
    font-size: .72em !important;
  }
  :is(.time-row, .field, .setting-control) { font-size: calc(var(--desktop-ui-base) + 2px); }
  .bottom-nav button { font-size: .76em !important; line-height: 1.1; }
  .bottom-nav button > span { font-size: 1.12em !important; }
  .bottom-nav :is(#nav-divine, #nav-records, #nav-settings) {
    font-size: 14px !important;
    line-height: 1.15;
    white-space: nowrap;
  }
  .bottom-nav :is(#nav-divine, #nav-records, #nav-settings) > span {
    font-size: 18px !important;
  }
  .cloud-record-tabs { grid-template-columns: 1fr; }
  :is(.section-title h2, .result-header h2) { font-size: 1.25em !important; }
  :is(.brand strong, .setting-control strong, .cast-mode-copy strong, .case-card-content > strong) {
    font-size: 1em !important;
  }
  :is(.vnext-spirit, .vnext-main-meta) { font-size: .84em !important; }
  :is(.vnext-marker, .change-arrow) { font-size: .9em !important; }
  :is(.line-flags, .hidden-note) { font-size: .62em !important; }

  .mobile-font-options { width: 220px; }
  .mobile-font-options button { min-height: 42px; font-size: 18px !important; }
  .auth-dialog, .password-reset-dialog { font-size: 15px; }
}

@media (max-width: 720px) {
  .auth-dialog .auth-shell > header span { display: none; }
  .auth-dialog .auth-shell > header strong { font-size: 18px; }
  .auth-dialog .auth-form label { font-size: 14px; }
  .auth-dialog .auth-form input { min-height: 32px; font-size: 14px; }
  .auth-dialog .auth-tabs { min-height: 36px; }
  .auth-dialog .auth-tabs button { font-size: 15px; }
  .auth-dialog .password-checklist { font-size: 9.5px; }
  .auth-dialog .auth-form .primary-action { min-height: 34px; }
  .password-reset-dialog { width: calc(100vw - 12px); }
  .setting-control { flex-wrap: wrap; }
  .setting-control select { min-width: min(11em, 58vw); max-width: 100%; }
}

@media (max-width: 360px), (max-height: 640px) {
  .auth-dialog .auth-shell > header { min-height: 42px; }
  .auth-dialog .auth-shell > header strong { font-size: 17px; }
  .auth-dialog .auth-form { gap: 3px; }
  .auth-dialog .auth-form label small { display: none; }
  .auth-dialog .auth-form input { min-height: 30px; }
  .auth-dialog .password-checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}