/* Authentication-surface-scoped composition using approved Urban Folk semantic tokens. */
.uf-auth-surface { margin: 0; color: var(--uf-text-default); background: var(--uf-surface-page); font-family: var(--uf-font-sans); font-size: var(--uf-body-md-size); line-height: var(--uf-body-md-line); font-weight: 400; }
.uf-auth-surface *, .uf-auth-surface *::before, .uf-auth-surface *::after { box-sizing: border-box; }
.uf-auth-surface [hidden] { display: none !important; }
.uf-auth-surface h1, .uf-auth-surface h2, .uf-auth-surface p, .uf-auth-surface fieldset { margin: 0; padding: 0; }
.uf-auth-surface a { color: var(--uf-action-primary); text-decoration: underline; text-underline-offset: var(--uf-stroke-2); }
.uf-auth-surface a:hover { color: var(--uf-action-primary-hover); text-decoration-thickness: var(--uf-stroke-2); }
.uf-auth-surface :is(a,button,input,select):focus-visible { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-stroke-2); }
.uf-auth-surface :is(main,[role=alert]):focus { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-space-1); }
.uf-auth-surface h1:focus { outline: none; }
.uf-auth-surface button, .uf-auth-surface input, .uf-auth-surface select { font: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; }
.uf-auth-layout { display: flex; min-height: 100vh; min-height: 100dvh; }
.uf-auth-media { width: 50%; position: sticky; top: 0; height: 100vh; height: 100dvh; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--uf-surface-sunken); }
.uf-auth-photo { flex: 1; min-height: 0; overflow: hidden; }
.uf-auth-photo picture { display: block; height: 100%; }
.uf-auth-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A solid, approved inverse surface keeps captions readable without introducing a gradient or tint. */
.uf-auth-caption { color: var(--uf-text-inverse); background: var(--uf-surface-inverse); padding: var(--uf-space-12); display: grid; gap: var(--uf-space-3); }
.uf-auth-caption h2 { color: inherit; text-wrap: balance; }
.uf-auth-pane { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.uf-auth-brand { display: flex; justify-content: center; align-items: center; padding: var(--uf-space-8) var(--uf-space-12); }
.uf-auth-brand a { width: 350px; /* Supplied logo display width in the design handoff. */ max-width: 100%; display: block; }
.uf-auth-brand img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--uf-space-24); }
.uf-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--uf-space-6) var(--uf-space-12) var(--uf-space-16); min-width: 0; }
.uf-auth-column { width: 100%; max-width: var(--uf-dialog-width-sm); }
.uf-auth-stepbar { display: flex; align-items: center; justify-content: space-between; min-height: var(--uf-control-sm); gap: var(--uf-space-4); margin-bottom: var(--uf-space-8); font-size: var(--uf-label-md-size); line-height: var(--uf-label-md-line); color: var(--uf-text-muted); font-variant-numeric: tabular-nums; }
.uf-auth-stepbar:has([data-back][hidden]):has([data-step-label]:empty) { display: none; }
.uf-auth-intro { color: var(--uf-text-muted); margin-top: var(--uf-space-2) !important; margin-bottom: var(--uf-space-8) !important; text-wrap: pretty; }
.uf-auth-surface .uf-auth-back, .uf-auth-surface .uf-auth-text-button { background: transparent; color: var(--uf-action-primary); border: 0; border-radius: var(--uf-radius-full); cursor: pointer; min-height: var(--uf-control-sm); padding: 0 var(--uf-space-2); font-weight: 500; }
.uf-auth-surface .uf-auth-back:hover, .uf-auth-surface .uf-auth-text-button:hover { background: var(--uf-action-subtle-hover); }
.uf-auth-surface .uf-auth-primary, .uf-auth-surface #registerform :is(input,button)[type=submit] { width: 100%; min-height: var(--uf-control-md); display: flex; justify-content: center; align-items: center; background: var(--uf-action-primary); color: var(--uf-on-action-primary); border: var(--uf-stroke-1) solid transparent; border-radius: var(--uf-radius-full); padding: var(--uf-space-3) var(--uf-space-5); font-family: var(--uf-font-sans); font-size: var(--uf-label-lg-size); line-height: var(--uf-label-lg-line); font-weight: 600; cursor: pointer; text-decoration: none; white-space: normal; }
.uf-auth-surface .uf-auth-primary:hover, .uf-auth-surface #registerform [type=submit]:hover { background: var(--uf-action-primary-hover); color: var(--uf-on-action-primary); }
.uf-auth-surface .uf-auth-primary:active { background: var(--uf-action-primary-active); }
.uf-auth-surface [aria-disabled=true] { cursor: wait; }
.uf-auth-surface form { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.uf-auth-field { margin-bottom: var(--uf-space-5); min-width: 0; }
.uf-auth-surface :is(.uf-auth-field,.uf-auth-otp) > label { display: block; font-size: var(--uf-label-md-size); line-height: var(--uf-label-md-line); font-weight: 500; margin-bottom: var(--uf-space-1); color: var(--uf-text-default); }
.uf-auth-surface .uf-auth-hint { color: var(--uf-text-muted); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); margin-bottom: var(--uf-space-1); }
.uf-auth-surface .uf-input, .uf-auth-surface #registerform input:not([type=hidden],[type=checkbox],[type=radio],[type=submit]), .uf-auth-surface #registerform select { display: block; width: 100%; height: var(--uf-control-md); min-height: var(--uf-control-md); margin: 0; padding: 0 var(--uf-space-4); border: var(--uf-stroke-1) solid var(--uf-border-control); border-radius: var(--uf-radius-md); background: var(--uf-surface-card); color: var(--uf-text-default); font-family: var(--uf-font-sans); font-size: var(--uf-body-md-size); line-height: var(--uf-body-md-line); font-weight: 400; box-shadow: none; }
.uf-auth-surface .uf-input:hover { border-color: var(--uf-border-strong); }
.uf-auth-surface input::placeholder { color: var(--uf-text-muted); opacity: 1; }
.uf-auth-surface .uf-input[aria-invalid=true] { border: var(--uf-stroke-2) solid var(--uf-status-danger-border); }
.uf-auth-password { position: relative; }
.uf-auth-password .uf-input { padding-right: var(--uf-space-20); }
.uf-auth-password button { position: absolute; right: var(--uf-space-1); top: var(--uf-space-1); bottom: var(--uf-space-1); border: 0; border-radius: var(--uf-radius-full); padding: 0 var(--uf-space-3); background: transparent; color: var(--uf-text-default); font-size: var(--uf-label-md-size); cursor: pointer; }
.uf-auth-password button:hover { background: var(--uf-action-subtle-hover); }
.uf-auth-forgot { display: flex; justify-content: flex-end; font-size: var(--uf-label-md-size); line-height: var(--uf-label-md-line); }
.uf-auth-name-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--uf-space-4); }
.uf-auth-roles { display: flex; flex-direction: column; gap: var(--uf-space-3); border: 0; min-width: 0; }
.uf-auth-role { display: flex; align-items: flex-start; gap: var(--uf-space-4); padding: var(--uf-space-5); border: var(--uf-stroke-1) solid var(--uf-border-control); border-radius: var(--uf-radius-lg); cursor: pointer; }
.uf-auth-role:has(input:checked) { outline: var(--uf-stroke-2) solid var(--uf-border-strong); outline-offset: calc(-1 * var(--uf-stroke-2)); }
.uf-auth-role:has(input[aria-invalid=true]) { border-color: var(--uf-status-danger-border); }
.uf-auth-role:hover { background: var(--uf-action-subtle-hover); }
.uf-auth-role > span:not(.uf-auth-icon) { flex: 1; }
.uf-auth-icon { display: inline-flex; flex: 0 0 var(--uf-icon-md); width: var(--uf-icon-md); height: var(--uf-icon-md); vertical-align: middle; }
.uf-auth-icon svg { width: 100%; height: 100%; }
.uf-auth-role > .uf-auth-icon { flex-basis: var(--uf-icon-lg); width: var(--uf-icon-lg); height: var(--uf-icon-lg); }
.uf-auth-password button .uf-auth-icon { width: var(--uf-icon-md); height: var(--uf-icon-md); }
.uf-auth-surface .uf-auth-back { display: inline-flex; align-items: center; gap: var(--uf-space-2); }
.uf-auth-actions p a { margin-inline-start: var(--uf-space-1); }
.uf-auth-primary .uf-auth-icon { margin-inline-end: var(--uf-space-2); }
.uf-auth-error .uf-auth-icon { width: var(--uf-icon-sm); height: var(--uf-icon-sm); margin-inline-end: var(--uf-space-1); }
.uf-auth-done-icon { color: var(--uf-status-success-fg); margin-bottom: var(--uf-space-4); }
.uf-auth-role strong { display: block; font-weight: 600; font-size: var(--uf-label-lg-size); line-height: var(--uf-label-lg-line); margin-bottom: var(--uf-space-1); }
.uf-auth-role span span { display: block; font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); color: var(--uf-text-muted); }
.uf-auth-surface input:is([type=radio],[type=checkbox]) { accent-color: var(--uf-selection-bg); flex-shrink: 0; width: var(--uf-icon-md); height: var(--uf-icon-md); margin: 0; }
.uf-auth-legal { color: var(--uf-text-muted); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); margin-top: var(--uf-space-6); }
.uf-auth-agreement { display: flex; gap: var(--uf-space-3); align-items: center; color: var(--uf-text-default); min-height: var(--uf-control-md); margin-top: var(--uf-space-3); }
.uf-auth-actions { margin-top: var(--uf-space-8); display: flex; flex-direction: column; gap: var(--uf-space-4); }
.uf-auth-actions p { text-align: center; color: var(--uf-text-muted); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); }
.uf-auth-surface .uf-auth-error { color: var(--uf-status-danger-fg); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); font-weight: 500; margin-top: var(--uf-space-1); }
.uf-auth-error::before { content: ''; display: inline-block; vertical-align: middle; width: var(--uf-icon-sm); height: var(--uf-icon-sm); background: currentColor; mask: url('icons/error.svg') center / contain no-repeat; margin-inline-end: var(--uf-space-1); }
.uf-auth-primary[aria-busy=true]::before { content: ''; width: var(--uf-icon-md); height: var(--uf-icon-md); background: currentColor; mask: url('icons/loading.svg') center / contain no-repeat; margin-inline-end: var(--uf-space-2); }
.uf-auth-password button[aria-pressed=true] .uf-auth-icon { background: currentColor; mask: url('icons/view-off.svg') center / contain no-repeat; }
.uf-auth-password button[aria-pressed=true] .uf-auth-icon svg { visibility: hidden; }
.uf-auth-alert, .uf-auth-surface .nsl-messages { border: var(--uf-stroke-1) solid var(--uf-status-danger-border); background: var(--uf-status-danger-bg); color: var(--uf-status-danger-fg); border-radius: var(--uf-radius-md); padding: var(--uf-space-4); margin-bottom: var(--uf-space-6); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); }
.uf-auth-alert ul { padding-left: var(--uf-space-5); margin-bottom: 0; }
.uf-auth-surface .nsl-messages .error { background: transparent !important; color: var(--uf-status-danger-fg) !important; border: 0 !important; margin: 0 !important; padding: var(--uf-space-1) !important; }
.uf-auth-divider { display: flex; align-items: center; gap: var(--uf-space-4); color: var(--uf-text-muted); font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); margin-bottom: var(--uf-space-6); }
.uf-auth-divider::before, .uf-auth-divider::after { content: ''; height: var(--uf-stroke-1); flex: 1; background: var(--uf-border-default); }
.uf-auth-social { display: grid; gap: var(--uf-space-3); margin-bottom: var(--uf-space-6); }
.uf-auth-surface .uf-auth-social .nsl-container { padding: 0 !important; }
.uf-auth-surface .uf-auth-social .nsl-container-buttons { display: flex !important; width: 100%; padding: 0 !important; gap: 0 !important; }
.uf-auth-surface .uf-auth-social .nsl-container-buttons > a { width: 100% !important; max-width: none !important; margin: 0 !important; text-decoration: none; }
.uf-auth-surface .uf-auth-social .nsl-button { display: flex !important; flex-direction: row !important; justify-content: center; background: var(--uf-surface-card) !important; color: var(--uf-text-default) !important; border: var(--uf-stroke-1) solid var(--uf-border-strong) !important; border-radius: var(--uf-radius-full) !important; box-shadow: none !important; min-height: var(--uf-control-md); height: var(--uf-control-md); align-items: center; }
.uf-auth-surface .uf-auth-social .nsl-button:hover { background: var(--uf-action-subtle-hover) !important; }
.uf-auth-surface .uf-auth-social .nsl-button-label-container { font-family: var(--uf-font-sans) !important; font-size: var(--uf-label-lg-size) !important; line-height: var(--uf-label-lg-line) !important; font-weight: 600 !important; padding: 0 var(--uf-space-3) !important; }
.uf-auth-surface .uf-auth-social .nsl-button-svg-container { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--uf-icon-md) !important; height: var(--uf-icon-md) !important; padding: 0 !important; }
.uf-auth-surface .uf-auth-social .nsl-button-svg-container svg { width: var(--uf-icon-md); height: var(--uf-icon-md); }
.uf-auth-surface .uf-auth-social .nsl-button-facebook .nsl-button-svg-container { background: var(--uf-provider-brand); border-radius: var(--uf-radius-full); }
.uf-auth-fallback { margin-top: var(--uf-space-6) !important; text-align: center; font-size: var(--uf-body-sm-size); line-height: var(--uf-body-sm-line); }
.uf-auth-social-role { border: 0; margin-bottom: var(--uf-space-6) !important; }
.uf-auth-social-role label { display: flex; align-items: center; gap: var(--uf-space-3); min-height: var(--uf-control-md); }
.uf-auth-nextend-details .submit { margin-top: var(--uf-space-8); }
.uf-auth-return { display: block; margin-top: var(--uf-space-4); }
.uf-auth-sr, .uf-auth-skip:not(:focus) { position: absolute; width: var(--uf-stroke-1); height: var(--uf-stroke-1); padding: 0; margin: calc(-1 * var(--uf-stroke-1)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.uf-auth-skip:focus { position: fixed; top: var(--uf-space-4); left: var(--uf-space-4); z-index: var(--uf-layer-toast); padding: var(--uf-space-4); background: var(--uf-surface-card); }
@media (max-width: 1024px) {
  .uf-auth-media { display: none; }
  .uf-auth-brand { padding: var(--uf-space-4) var(--uf-gutter-mobile); }
  .uf-auth-brand img { max-height: var(--uf-space-16); }
  .uf-auth-main { align-items: stretch; padding: var(--uf-space-6) var(--uf-gutter-mobile) 0; }
  .uf-auth-column { display: flex; flex-direction: column; min-height: calc(100dvh - var(--uf-space-24)); }
  #uf-auth-form { display: flex; flex-direction: column; flex: 1; }
  .uf-auth-actions { position: sticky; bottom: 0; z-index: var(--uf-layer-sticky); margin: var(--uf-space-6) calc(-1 * var(--uf-gutter-mobile)) 0; padding: var(--uf-space-4) var(--uf-gutter-mobile) max(var(--uf-space-6),env(safe-area-inset-bottom)); border-top: var(--uf-stroke-1) solid var(--uf-border-default); background: var(--uf-surface-page); }
  .uf-auth-fallback { padding-bottom: var(--uf-space-6); }
  .uf-auth-nextend-details .submit { position: sticky; bottom: 0; padding: var(--uf-space-4) 0 max(var(--uf-space-6),env(safe-area-inset-bottom)); background: var(--uf-surface-page); z-index: var(--uf-layer-sticky); }
}
@media (max-width: 767px) {
  .uf-auth-name-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .uf-auth-surface .uf-type-heading-xl { font-size: var(--uf-heading-lg-size); line-height: var(--uf-heading-lg-line); letter-spacing: var(--uf-heading-lg-tracking); }
}