/* Surface-specific finishing touches. Customer pages keep their light palette. */
.ui-login { min-height: 100dvh; padding-block: 24px; line-height: 1.6; }
.ui-login .login-box { max-width: 480px; }
.ui-login .login-card { padding: 40px; border-color: var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.ui-login .login-title { font-size: 1.625rem; }
.ui-login .login-desc, .ui-login .form-label { font-size: .875rem; }
.ui-login .logo-sub { font-family: inherit; font-size: .75rem; line-height: 1.5; }
.ui-login .form-control { min-height: 48px; font-size: 16px; background: var(--bg); border-radius: 10px; }
.ui-login .form-control:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.ui-login .btn-login { min-height: 48px; border-radius: 10px; }
.ui-login .btn-login:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.ui-customer { --text3: #72634d; --ui-focus: #285fc4; color-scheme: light; line-height: 1.6; }
.ui-customer :is(.section-label, .mat-sub, .phase-label) { font-size: .8125rem; }
.ui-customer :is(button, .pnav-item) { min-height: 44px; }
.ui-customer .portal-nav { scrollbar-width: thin; scrollbar-color: var(--gold2) var(--dark2); }
.ui-customer .portal-nav::-webkit-scrollbar { display: block; height: 6px; }
.ui-customer .pnav-item { background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: inherit; font-size: .875rem; color: #c5baa9; }
.ui-customer .pnav-item.active { color: var(--gold2); border-bottom-color: var(--gold); }
/* These few fields have legacy inline font-size/outline rules. */
.ui-customer :is(input:not([type="hidden"]), select, textarea) { font-size: 16px !important; }
.ui-customer :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ui-focus) !important; outline-offset: 3px; }
.ui-liff :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; }
.ui-liff :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ui-focus, #285fc4); outline-offset: 3px; }
@media (max-width: 480px) {
  .ui-login .login-box { padding: 16px; }
  .ui-login .login-card { padding: 28px 24px; }
  .ui-login .login-logo { gap: 12px; }
  .ui-login .logo-icon { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-customer *, .ui-liff * { animation: none !important; transition: none !important; }
}