/* FÖRST Work login: a narrower box, the symbol sized from the box, 50px between the symbol and the box (the mascot sits
   in it), FÖRST WORK in the middle of the symbol, and the two sign-in fields as "label | field" rows.
   Loaded after work-wave-v3.css, so these rules win over its sizes. */

/* the box: 80% of the old 520px */
html.login-pf .pf-v5-c-login__container {
  max-width: 416px !important;
  width: 100% !important;
  gap: 50px !important;            /* from the bottom of the symbol to the top edge of the box (the mascot sits in it) */
  position: relative;
}
html.login-pf .pf-v5-c-login__main { max-width: 416px !important; width: 100% !important; }

/* the symbol: the O is 2/3 of the box width and the word across it is 95% of the box, so this frame is 95% of the box;
   its proportions are kept, and on a short screen it gives way so the box stays in view */
html.login-pf #kc-header-wrapper,
html.login-pf[data-work-theme] #kc-header-wrapper {
  width: max(200px, min(95%, calc((100vh - 404px) * 1.489))) !important;   /* the word is 95% of the box, the O in it 2/3 of the box */
  height: auto !important;
  aspect-ratio: 393.3 / 264;
  margin: 0 auto !important;
}
html.login-pf body,
html.login-pf[data-work-theme] body {
  padding-top: max(16px, calc((100vh - 600px) / 2)) !important;
}

/* FÖRST WORK across the middle of the symbol, 95% of the box wide, over the O and out to both sides: white on the dark screen, dark grey on the light one */
/* warm grey letters: lighter than the old dark grey on the light screen, a warm off-white on the dark one; over the yellow crescents the dark copy keeps the word readable */
#kc-header-wrapper .work-word { fill: #e8e3dc; }
#kc-header-wrapper .work-word-on-yellow { fill: #3e3b37; }
html[data-work-theme='light'] #kc-header-wrapper .work-word,
html[data-work-theme='light'] #kc-header-wrapper .work-word-on-yellow { fill: #77716a; }

/* the sign-in fields: the name on the left, the field on its right */
#kc-form-login .pf-v5-c-form__group:has(#username),
#kc-form-login .pf-v5-c-form__group:has(#password) {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
#kc-form-login .pf-v5-c-form__group:has(#username) > .pf-v5-c-form__group-label,
#kc-form-login .pf-v5-c-form__group:has(#password) > .pf-v5-c-form__group-label {
  grid-column: 1;
  grid-row: 1;
  padding: 0 !important;
  white-space: nowrap;
}
#kc-form-login .pf-v5-c-form__group:has(#username) > :not(.pf-v5-c-form__group-label),
#kc-form-login .pf-v5-c-form__group:has(#password) > :not(.pf-v5-c-form__group-label) {
  grid-column: 2;
}
/* a phone is too narrow for two columns: back to the name above the field */
@media (max-width: 420px) {
  #kc-form-login .pf-v5-c-form__group:has(#username),
  #kc-form-login .pf-v5-c-form__group:has(#password) { display: block !important; }
  #kc-form-login .pf-v5-c-form__group:has(#username) > .pf-v5-c-form__group-label,
  #kc-form-login .pf-v5-c-form__group:has(#password) > .pf-v5-c-form__group-label { padding-bottom: 4px !important; }
}

/* the mascot waving from the top edge of the box (its top is set by work-mascot-v1.js) */
.work-mascot {
  position: absolute;
  right: 14px;
  top: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  image-rendering: pixelated;
  z-index: 2;
}

/* the hint inside the empty boxes (아이디, ...) is quieter than the label beside it: smaller and lighter, in both themes */
#kc-form-login input::placeholder { font-size: 13px; opacity: 1; color: #aaa59e; }
html[data-work-theme='dark'] #kc-form-login input::placeholder { color: rgba(240, 242, 245, .42); }