/* Arcade 66 login presentation. Functional forms and scripts remain inherited. */
:root {
  --arcade-ink: #ecedda;
  --arcade-muted: #b9c6ae;
  --arcade-gold: #dec97b;
  --arcade-green: #b4d593;
  --arcade-line: #52604b;
  --arcade-panel: #16261e;
  --pf-global--Color--100: var(--arcade-ink);
  --pf-global--Color--200: var(--arcade-muted);
  --pf-global--Color--300: var(--arcade-ink);
  --pf-global--BackgroundColor--100: var(--arcade-panel);
  --pf-global--BackgroundColor--200: #203026;
  --pf-global--primary-color--100: var(--arcade-gold);
  --pf-global--primary-color--200: #efdb93;
  --pf-global--danger-color--100: #ffc0ad;
  --pf-global--danger-color--200: #ffc0ad;
  color-scheme: dark;
}

html.login-pf { min-height: 100%; background: #0c1712; }
.login-pf body {
  min-height: 100vh;
  height: auto;
  margin: 0;
  color: var(--arcade-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 50% 0%, #52603b30, transparent 62%),
    repeating-linear-gradient(0deg, #ffffff02 0, #ffffff02 1px, transparent 1px, transparent 5px),
    #0c1712;
}
.login-pf-page { padding: 42px 20px 60px; }
#kc-header { margin: 0 auto 25px; padding: 0; text-align: center; }
#kc-header-wrapper {
  padding: 0;
  color: var(--arcade-gold);
  font: 700 27px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: normal;
}
#kc-header-wrapper::before {
  content: "66";
  display: grid;
  place-items: center;
  width: 57px;
  height: 57px;
  margin: 0 auto 15px;
  border: 2px solid var(--arcade-gold);
  border-radius: 12px;
  color: var(--arcade-gold);
  background: #223328;
  box-shadow: 0 0 25px #c4d07e0c, inset 0 0 0 4px #0c1712;
  font-size: 28px;
  letter-spacing: -.1em;
  padding-right: 3px;
}
/* Neutralize the inherited image mark if an inherited page requests that class. */
div.kc-logo-text { background: none; width: auto; height: auto; }
div.kc-logo-text span { display: inline; }
.login-pf-page .card-pf {
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  padding: 30px 32px 32px;
  color: var(--arcade-ink);
  background: linear-gradient(135deg, #1c2d22, var(--arcade-panel) 58%);
  border: 1px solid var(--arcade-line);
  border-top: 3px solid var(--arcade-gold);
  border-radius: 9px;
  box-shadow: 0 18px 55px #0005;
}
.login-pf-page .login-pf-header { margin-bottom: 25px; }
h1#kc-page-title {
  margin: 0;
  color: var(--arcade-ink);
  font: 650 25px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}
#kc-content-wrapper { margin-top: 20px; }
#kc-form-wrapper { margin-top: 0; }
.login-pf .form-group { margin-bottom: 20px; }
.login-pf label,
.login-pf .pf-c-form__label,
.login-pf .pf-c-form__label-text { color: var(--arcade-ink); font-weight: 550; }
.login-pf .pf-c-form-control,
.login-pf .form-control {
  min-height: 46px;
  color: var(--arcade-ink);
  background: #0c1a12;
  border: 1px solid #69775e;
  border-radius: 5px;
  box-shadow: none;
  font-size: 16px;
  --pf-c-form-control--Color: var(--arcade-ink);
  --pf-c-form-control--BackgroundColor: #0c1a12;
  --pf-c-form-control--BorderColor: #69775e;
}
.login-pf .pf-c-form-control::placeholder,
.login-pf .form-control::placeholder { color: #a0ae96; opacity: 1; }
.login-pf .pf-c-form-control:focus,
.login-pf .form-control:focus { border-color: var(--arcade-gold); outline: 2px solid #dec97b8f; outline-offset: 2px; }
.login-pf input:-webkit-autofill,
.login-pf input:-webkit-autofill:focus { -webkit-text-fill-color: var(--arcade-ink); box-shadow: 0 0 0 1000px #0c1a12 inset; caret-color: var(--arcade-ink); }
.login-pf .pf-c-button,
.login-pf .btn { min-height: 44px; border-radius: 5px; font-weight: 650; }
.login-pf .pf-c-button.pf-m-primary,
.login-pf .btn-primary {
  color: #172014;
  background: var(--arcade-gold);
  border: 1px solid var(--arcade-gold);
  background-image: none;
  text-shadow: none;
  --pf-c-button--m-primary--Color: #172014;
  --pf-c-button--m-primary--BackgroundColor: var(--arcade-gold);
}
.login-pf .pf-c-button.pf-m-primary:hover,
.login-pf .btn-primary:hover { color: #172014; background: #efdb93; border-color: #efdb93; }
.login-pf .pf-c-button.pf-m-control,
.login-pf .btn-default { color: var(--arcade-ink); background: #26372a; border-color: #69775e; box-shadow: none; text-shadow: none; }
.login-pf .pf-c-button.pf-m-control:hover,
.login-pf .btn-default:hover { background: #344831; color: #f4f3e2; }
.login-pf a { color: var(--arcade-green); text-underline-offset: 3px; }
.login-pf a:hover { color: #d6eabf; }
.login-pf :is(a, button, input[type="submit"], input[type="checkbox"]):focus-visible { outline: 2px solid var(--arcade-gold); outline-offset: 3px; }
.login-pf input[type="checkbox"], .login-pf input[type="radio"] { accent-color: var(--arcade-gold); }
#kc-form-options .checkbox,
.login-pf-page .login-pf-signup,
.login-pf .subtitle,
.login-pf p.instruction,
.login-pf .pf-c-form__helper-text { color: var(--arcade-muted); }
.login-pf .required,
.login-pf .pf-m-error,
.login-pf .has-error .help-block { color: #ffc0ad; }
#kc-info { margin: 28px -32px -32px; }
#kc-info-wrapper { padding: 20px 32px; border-top: 1px solid #52604b; border-radius: 0 0 8px 8px; color: var(--arcade-muted); background: #0d1a1366; }
#kc-form-buttons { margin-top: 23px; }
#kc-attempted-username { color: var(--arcade-ink); overflow-wrap: anywhere; }
.login-pf .pf-c-alert,
.login-pf .alert { color: var(--arcade-ink); background: #26392a; border-color: #7d9570; box-shadow: none; }
.login-pf .pf-c-alert__title { color: inherit; font-size: 14px; line-height: 1.5; }
.login-pf .alert-error,
.login-pf .pf-c-alert.pf-m-danger { color: #ffe0d6; background: #402820; border-color: #cd8f72; }
.login-pf .alert-warning,
.login-pf .pf-c-alert.pf-m-warning { color: #f8e8b4; background: #3a3320; border-color: #bfa360; }
.login-pf .pf-c-alert__icon { color: inherit; }
#kc-locale-dropdown a,
#kc-locale-dropdown button { color: var(--arcade-muted); }
#kc-locale ul { background: #203026; border: 1px solid var(--arcade-line); }
.login-pf .select-auth-box-parent { border-color: var(--arcade-line); color: var(--arcade-ink); }
.login-pf .select-auth-box-parent:hover { background: #2a3c2b; }
.login-pf .select-auth-box-headline,
#kc-form-webauthn .select-auth-box-headline { color: var(--arcade-gold); }
.login-pf .select-auth-box-desc,
#kc-form-webauthn .select-auth-box-desc { color: var(--arcade-muted); }
.login-pf .kc-recovery-codes-list { border-color: var(--arcade-line); background: #0c1a12; color: var(--arcade-ink); }
.login-pf .kc-recovery-codes-list li span { color: var(--arcade-muted); }

@media (max-width: 600px) {
  .login-pf-page { padding: 28px 16px 40px; }
  #kc-header { padding: 0; margin-bottom: 23px; text-align: center; }
  #kc-header-wrapper { padding: 0; color: var(--arcade-gold); font-size: 23px; letter-spacing: .14em; }
  .login-pf-page .card-pf { max-width: 470px; margin: 0 auto; padding: 25px 23px 27px; border: 1px solid var(--arcade-line); border-top: 3px solid var(--arcade-gold); box-shadow: 0 18px 55px #0005; }
  h1#kc-page-title { font-size: 23px; }
  #kc-info { margin: 25px -23px -27px; }
  #kc-info-wrapper { padding: 19px 23px; }
}
@media (forced-colors: active) {
  #kc-header-wrapper::before, .login-pf-page .card-pf { border: 1px solid CanvasText; }
  .login-pf .pf-c-form-control, .login-pf .form-control { border: 1px solid CanvasText; }
}