/* Phone-first form controls. Brand values live in tokens.css. */
.form-field { min-width: 0; }
.form-field[hidden] { display: none !important; }
.form-field input, .form-field select, .form-field textarea {
  scroll-margin-block: 100px;
  max-width: 100%;
}
.form-field input[type=tel], .form-field input[type=email] { text-align: left; }
.field-help, .field-error { font-size: var(--text-xs); overflow-wrap: anywhere; }
.field-help ul { padding-inline-start: 20px; }
.field-errors .field-error { display: block; }
.form-error:focus { outline: 2px solid var(--primary); outline-offset: 4px; }
.error-summary-links { margin-block: 10px 0; padding-inline-start: 20px; }
.form-error { scroll-margin-block: 100px; }
.error-summary-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; text-decoration: underline; text-underline-offset: 3px; }
.password-control, .phone-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.password-control:focus-within, .phone-control:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.form-field .password-control input:not([type=checkbox]), .form-field .phone-control input {
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 11px 14px;
  outline: none;
  box-shadow: none;
}
html[dir="rtl"] .password-control input { text-align: right; }
html[dir="ltr"] .password-control input { text-align: left; }
.phone-control { direction: ltr; grid-template-columns: auto minmax(0, 1fr); }
.phone-prefix { display: flex; align-items: center; align-self: stretch; padding: 0 14px; border-right: 1px solid var(--line); background: var(--soft); color: var(--primary); font-family: 'Inter', sans-serif; font-size: var(--text-sm); direction: ltr; }
.form-field .phone-control input { direction: ltr; text-align: left; font-family: 'Inter', sans-serif; font-size: var(--text-base); letter-spacing: .02em; }
.has-error .password-control, .has-error .phone-control { border-color: var(--brand-red); }
.password-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  min-height: 44px;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: var(--primary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}
.password-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .eye-slash { display: none; }
.password-toggle[aria-pressed=true] .eye-slash { display: block; }
.password-toggle:focus-visible { outline: 2px solid var(--primary); }
.button[aria-busy=true] { opacity: .7; cursor: progress; }
.field-code input:not([type=checkbox]) {
  direction: ltr;
  text-align: center;
  letter-spacing: .32em;
  font-size: var(--text-xl);
  font-weight: 600;
  min-height: 64px;
  background: var(--blue);
}
.signup-progress {
  list-style: none;
  padding: 0 0 22px;
  margin: 0 0 22px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}
.signup-progress li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-xs); }
.signup-progress li > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: var(--text-xs);
}
.signup-progress .current { color: var(--primary); font-weight: 700; }
.signup-progress .current > span { color: var(--paper); background: var(--primary); border-color: var(--primary); }
.signup-progress .complete > span { color: var(--primary); background: var(--blue); }
.auth-form .notice { margin-bottom: 20px; }
.auth-form .back-link, .auth-alternative a { min-height: 44px; display: inline-flex; align-items: center; }
.auth-form .muted { overflow-wrap: anywhere; }
.verification-phone { direction: ltr; text-align: center; padding: 10px 14px; border-radius: 12px; background: var(--blue); color: var(--primary); font-weight: 600; margin-block: 0 20px; }
.form-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--primary);
}
.form-group-title:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.form-group-title > span { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.request-form .form-actions { flex-wrap: wrap; }
.request-submit-note { flex-basis: 100%; margin: 0; font-size: var(--text-xs); line-height: 1.9; color: var(--muted); }
.account-identity { margin-bottom: 20px; }
.account-identity-copy { min-width: 0; }
.account-identity h2 { overflow-wrap: anywhere; margin-top: 12px; }
.account-security-note { margin-bottom: 20px; font-size: var(--text-sm); }
.account-summary .button, .account-summary .text-button { min-height: 48px; }
.account-summary .button { width: 100%; }
.account-management { display: grid; gap: 10px; margin-block: 16px; }
.account-panel { min-width: 0; }
.account-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px; margin-bottom: 20px; background: var(--soft); border-radius: 14px; }
.account-tabs button { min-height: 48px; padding: 10px; background: transparent; color: var(--muted); border: 0; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; }
.account-tabs button[aria-selected=true] { background: var(--paper); color: var(--primary); box-shadow: var(--shadow); }
.account-options > summary, .optional-notes > summary { min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--primary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.account-options > summary::after, .optional-notes > summary::after { content: '+'; margin-inline-start: auto; font-size: var(--text-lg); }
.account-options[open] > summary::after, .optional-notes[open] > summary::after { content: '−'; }
.account-options > summary::-webkit-details-marker, .optional-notes > summary::-webkit-details-marker { display: none; }
.request-back-link { display: inline-flex; align-items: center; min-height: 44px; }
.request-step-progress { display: flex; justify-content: space-between; gap: 8px; padding: 0 0 14px; margin: 0; list-style: none; border-bottom: 1px solid var(--line); }
.request-step-progress li { font-size: var(--text-xs); color: var(--muted); }
.request-step-progress li[aria-current=step] { color: var(--primary); font-weight: 700; }
.request-step { min-width: 0; border: 0; padding: 0; margin: 0; }
.request-step legend { font-size: var(--text-base); color: var(--primary); font-weight: 600; margin-bottom: 18px; }
.optional-notes { border-top: 1px solid var(--line); padding-top: 8px; }
.optional-notes[open] > summary { margin-bottom: 12px; }
.form-step-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
.form-step-status { grid-column: 1 / -1; text-align: center; font-size: var(--text-xs); color: var(--muted); }
.form-step-controls .button { grid-row: 2; min-height: 48px; }
.form-step-controls .button-outline { grid-column: 1; }
.form-step-controls .button:not(.button-outline) { grid-column: 2; }
.form-step-controls .button-outline[hidden] ~ .button { grid-column: 1 / -1; }
.request-step[hidden], .form-actions[hidden], .form-step-controls button[hidden], .account-panel[hidden], .account-panel-divider[hidden] { display: none !important; }
.account-settings h2 { margin-bottom: 20px; }
.form-field input[type=file] { font-size: var(--text-sm); line-height: 1.8; }
.form-field input[type=file]::file-selector-button {
  font: inherit;
  padding: 10px 12px;
  margin-inline-end: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--blue);
  color: var(--primary);
  cursor: pointer;
}
@media (max-width: 720px) {
  .auth-layout { gap: 14px; margin-top: 0; }
  .auth-story { background: none; padding: 0 4px 2px; border-radius: 0; min-height: 0; }
  .auth-story .hero-label { color: var(--primary); background: var(--blue); font-size: var(--text-xs); padding: 5px 10px; }
  .auth-story h2, .auth-story p, .auth-story .auth-visual, .auth-story .auth-benefits { display: none; }
  .auth-form { padding: 22px 18px; border-radius: 20px; }
  .auth-form > .service-icon { display: none; }
  .auth-form h1 { font-size: var(--text-xl); margin-bottom: 8px; }
  .auth-form > .muted { font-size: var(--text-sm); line-height: 1.9; margin-bottom: 22px; }
  .auth-form .form-grid { gap: 18px; }
  .auth-form .button { width: 100%; min-height: 52px; margin-top: 6px; }
  .auth-alternative { margin-top: 18px; }
  .form-field label { font-size: var(--text-sm); }
  .form-field input:not([type=checkbox]), .form-field select, .form-field textarea {
    font-size: var(--text-base);
    min-height: 52px;
    border-radius: 12px;
  }
  .field-code input:not([type=checkbox]) { font-size: var(--text-xl); min-height: 66px; }
  .form-field input::placeholder { font-size: var(--text-sm); }
  .form-field textarea { min-height: 112px; }
  .form-layout.request-layout { gap: 18px; }
  .request-layout .form-surface, .account-settings { padding: 20px 16px; border-radius: 20px; }
  .request-form { gap: 18px 12px; }
  .request-form .form-group-title { margin-top: 6px; }
  .request-form .form-actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; padding-top: 8px; }
  .request-form .request-submit-note { flex-basis: auto; }
  .request-form .form-actions .button, .account-settings .button { width: 100%; min-height: 52px; }
  .request-form .form-actions > .muted { text-align: center; font-size: var(--text-xs); }
  .stepped-form .form-step-controls { position: sticky; bottom: calc(var(--mobile-nav-height, 72px) + env(safe-area-inset-bottom) + 8px); z-index: 3; background: var(--paper); padding-block: 10px; border-top: 1px solid var(--line); }
  .keyboard-open .stepped-form .form-step-controls { bottom: 8px; }
  .stepped-form .form-step-controls .button { width: 100%; min-height: 50px; margin: 0; }
  .account-layout { display: flex; flex-direction: column; gap: 18px; }
  .account-summary { order: -1; }
  .account-summary .info-card { padding: 20px; }
  .account-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .account-identity .avatar-photo, .account-identity .avatar-large { width: 64px; height: 64px; flex: 0 0 64px; margin: 0; }
  .account-identity h2 { font-size: var(--text-lg); margin: 0 0 4px; }
  .account-identity p { margin: 0 0 8px; }
  .account-summary .muted { font-size: var(--text-xs); }
  .account-summary .text-button { width: 100%; text-align: start; }
  .request-screen > .request-back-link { display: none; }
  .request-screen > .page-heading, .account-screen > .page-heading { margin: 0 0 12px; }
  .request-screen > .page-heading > p, .account-screen > .page-heading > p { display: none; }
  .request-screen .page-heading h1, .account-screen .page-heading h1 { font-size: var(--text-xl); line-height: 1.5; margin: 0; }
  .request-screen .stepped-surface > .form-section-heading { display: none; }
  .request-screen .form-surface { padding: 16px; }
  .request-screen .request-layout { gap: 12px; }
  .request-screen .stepped-form, .request-screen .request-step { gap: 12px; }
  .request-screen .request-step-progress { padding-bottom: 10px; }
  .request-screen .request-step legend { font-size: var(--text-sm); margin-bottom: 12px; }
  .request-screen .form-field label { margin-bottom: 4px; }
  .request-screen .form-field input:not([type=checkbox]), .request-screen .form-field select { min-height: 48px; padding-block: 9px; }
  .request-screen .traveler-step { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .request-screen .traveler-step .form-field label { min-height: 42px; font-size: var(--text-xs); line-height: 1.75; }
  .request-screen .traveler-step .field-help { margin: 0; line-height: 1.7; }
  .request-screen .stepped-form .form-actions { padding: 0; gap: 0; }
  .request-screen .stepped-form .form-actions > .muted { display: none; }
  .request-screen .request-submit-note { line-height: 1.7; }
  .request-screen .form-step-controls { padding-block: 8px; }
  .account-screen .account-layout { gap: 12px; }
  .account-screen .account-summary .info-card { padding: 12px 16px; }
  .account-screen .account-identity { margin-bottom: 6px; gap: 12px; }
  .account-screen .account-identity .avatar-photo, .account-screen .account-identity .avatar-large { width: 48px; height: 48px; flex-basis: 48px; }
  .account-screen .account-identity .status { display: none; }
  .account-screen .account-identity p { margin: 0; font-size: var(--text-xs); }
  .account-screen .account-settings { padding: 14px 16px; }
  .account-screen .account-tabs { margin-bottom: 14px; }
  .account-screen .tabbed-settings .account-panel > h2 { display: none; }
  .account-screen .account-settings .form-grid { gap: 12px; }
  .account-screen #profile-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-screen .account-security-note { margin-bottom: 12px; font-size: var(--text-xs); }
  .account-screen .account-layout:has(#password-panel:not([hidden])) .account-summary { display: none; }
}

/* Keep the app frame still; long forms remain reachable inside their own area. */
body.auth-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}
.auth-page .site-header { flex: none; }
.auth-page .main-shell {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.auth-page .site-footer { display: none; }

@media (max-width: 800px) {
  .auth-page .main-shell { padding-block: 12px; }
  .auth-page .auth-layout { gap: 10px; }
  .auth-page .auth-form { padding: 18px 16px; }
  .auth-page .auth-form > .muted { margin-bottom: 16px; }
  .auth-page .signup-progress { padding-bottom: 14px; margin-bottom: 14px; }

  /* These rules activate only after enhancement, preserving the full no-JS form. */
  .app-page .request-screen:has(.stepped-form),
  .app-page .account-screen:has(.tabbed-settings) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
  }
  .app-page .request-screen > .page-heading,
  .app-page .account-screen > .page-heading { flex: none; margin-bottom: 10px; }
  .app-page .request-screen:has(.stepped-form) > .request-back-link { display: none; }
  .app-page .request-screen:has(.stepped-form) .request-layout,
  .app-page .account-screen:has(.tabbed-settings) .account-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    gap: 10px;
  }
  .app-page .request-screen .stepped-surface {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    padding: 14px;
  }
  .app-page .stepped-surface > .form-section-heading { display: none; }
  .app-page .request-screen .stepped-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    gap: 10px;
  }
  .app-page .stepped-form > .request-step-progress { flex: none; }
  .app-page .stepped-form > .form-error {
    flex: 0 1 auto;
    min-height: 44px;
    max-height: 25%;
    overflow: auto;
    scroll-margin-block: 8px;
  }
  .app-page .stepped-form > .request-step {
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    min-inline-size: 0;
    overflow: var(--form-region-overflow, auto);
    align-content: start;
    padding: 4px;
    scroll-padding-block: 8px;
    overscroll-behavior-y: contain;
  }
  .app-page .request-step .form-field input,
  .app-page .request-step .form-field select,
  .app-page .request-step .form-field textarea { scroll-margin-block: 8px; }
  .app-page .stepped-form > .form-actions { flex: none; margin-top: 0; }
  .app-page .request-screen .stepped-form > .form-step-controls {
    position: static;
    flex: none;
    padding: 8px 0 0;
    gap: 4px 10px;
  }
  .app-page .account-screen .account-summary {
    order: -1;
    flex: 0 0 auto;
    min-height: 0;
    max-height: 28%;
    overflow: auto;
    overscroll-behavior-y: contain;
  }
  .app-page .account-screen .tabbed-settings {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    padding: 12px;
  }
  .app-page .tabbed-settings > .account-tabs { flex: none; margin-bottom: 10px; }
  .app-page .tabbed-settings > .account-panel {
    flex: 1;
    min-height: var(--form-frame-min-height, 0);
    overflow: var(--form-region-overflow, auto);
    padding: 4px;
    scroll-padding-block: 12px 80px;
    overscroll-behavior-y: contain;
  }
  .app-page .account-panel .form-field input { scroll-margin-block: 12px; }
  .app-page .account-panel .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding-block: 10px 2px;
    background: var(--paper);
  }
  /* A keyboard must not leave a zero-height inner field area. Let the main
     content scroll naturally while the outer app frame remains fixed. */
  .app-page.keyboard-open {
    --form-frame-min-height: min-content;
    --form-region-overflow: visible;
  }
}

@media (max-width: 800px) and (max-height: 480px) {
  .app-page {
    --form-frame-min-height: min-content;
    --form-region-overflow: visible;
  }
}