/*
  Plasma Login Manager and the lock screen (spec, stage 3 and appendix A).

  Sizes are KDE's, converted at 96 dpi: the clock is 72 pt = 96 px, the date
  24 pt = 32 px, the user name 16 pt ≈ 21.3 px. The form column is 288 px at
  most, the avatar a 126 px circle on a 60 % backing.

  The two durations are the appendix's own — blur 800 ms, form 400 ms — and
  not the CachyOS 0.25x tokens: the greeter is its own process and does not
  read the desktop's animation speed. Reduced motion and Settings → "off"
  still win; see the end of the file.
*/

.login {
  --login-blur-ms: 800ms;
  --login-form-ms: 400ms;
  --login-col: 288px;
  --login-field-h: 36px;
  --login-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 14px rgb(0 0 0 / 0.45);

  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #0a0f15;
  color: var(--bz-text);
  font-family: var(--bz-font);
  font-size: var(--bz-font-size);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}

.login *,
.login *::before,
.login *::after {
  box-sizing: border-box;
}

:where(.login) p {
  margin: 0;
}

.login button {
  font: inherit;
  color: inherit;
}

.login :focus-visible {
  outline: 2px solid var(--bz-accent);
  outline-offset: 2px;
}

/* ---------- wallpaper ---------- */

/*
  Oversized by the blur radius on every side, so the blur has wallpaper to
  sample at the edges instead of fading the corners to black.

  Qt's radius 50 is not CSS's: CSS blur() takes a standard deviation, and a
  Qt blur of radius r reads closest to a deviation of about r / 2.
*/
.login__wall {
  position: absolute;
  inset: -64px;
  background: #0f1620 url("login-wallpaper.svg") center / cover no-repeat;
  transition: filter var(--login-blur-ms) ease;
}

.login__wall--custom {
  background-size: cover;
  background-position: center;
}

.login.is-active .login__wall {
  filter: blur(25px) contrast(0.8) saturate(1.5);
}

/* Only enough shade to keep white text legible over the bright ridge. */
.login__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.38));
  transition: background-color var(--login-blur-ms) ease;
}

.login.is-active .login__scrim {
  background-color: rgb(0 0 0 / 0.12);
}

/* ---------- stage: clock above, form below ---------- */

.login__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 60px;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: center;
}

/*
  Centred by auto margins, not by justify-content. A column that is taller
  than the screen and centred that way overflows equally upwards, where it
  cannot be scrolled to: the clock of a phone on its side was cut off at the
  top while the power buttons were cut off at the bottom. Auto margins centre
  what fits and start at the top what does not.
*/
.login__clock {
  margin-top: auto;
  text-shadow: var(--login-shadow);
}

.login__time {
  font-size: min(96px, 25vw);
  font-weight: 600;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.login__date {
  margin-top: 6px;
  font-size: min(32px, 8.5vw);
  font-weight: 400;
  line-height: 1.2;
}

/*
  The form grows out of nothing under the clock: its row goes from 0fr to
  1fr, so the clock rises by exactly the form's height and stays centred
  with it, with no measuring in script.
*/
.login__reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin-bottom: auto;
  opacity: 0;
  transition:
    grid-template-rows var(--login-form-ms) ease,
    opacity var(--login-form-ms) ease;
}

.login.is-active .login__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}

/*
  Clipped while it grows, unclipped once grown — the session menu and the
  focus rings must be free to spill over the edge.
*/
.login__reveal-in {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login.is-active .login__reveal-in {
  animation: login-unclip 0s var(--login-form-ms) forwards;
}

@keyframes login-unclip {
  to {
    overflow: visible;
  }
}

/* ---------- the form ---------- */

.login__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--login-col);
  margin-top: 36px;
}

.login__avatar {
  position: relative;
  width: 126px;
  height: 126px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: rgb(32 35 38 / 0.6);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.35), inset 0 0 0 1px rgb(252 252 252 / 0.1);
}

/* Scaled a hair past the circle so the PNG's own rounded corners never show at its edge. */
.login__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.login__avatar-other {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--bz-text-inactive);
}

.login__avatar-other .login__icon {
  width: 64px;
  height: 64px;
  stroke-width: 1.1;
}

.login.is-other .login__avatar-img {
  display: none;
}

.login.is-other .login__avatar-other {
  display: grid;
}

.login__name {
  margin: 10px 0 18px;
  font-size: 21.3px;
  line-height: 1.25;
  text-shadow: var(--login-shadow);
}

.login__name[hidden] {
  display: block;
  visibility: hidden;
  height: 0;
  margin-bottom: 18px;
}

.login__user-wrap {
  width: 100%;
  margin-bottom: 6px;
}

.login__user-wrap[hidden] {
  display: none;
}

.login__row {
  display: flex;
  gap: 6px;
  width: 100%;
}

.login__row.is-shaking {
  animation: login-shake 360ms ease;
}

@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  35% { transform: translateX(8px); }
  55% { transform: translateX(-6px); }
  75% { transform: translateX(4px); }
  90% { transform: translateX(-2px); }
}

.login__pw {
  position: relative;
  flex: 1;
  min-width: 0;
}

.login__input {
  display: block;
  width: 100%;
  height: var(--login-field-h);
  padding: 0 10px;
  border: 1px solid rgb(252 252 252 / 0.14);
  border-radius: var(--bz-radius);
  background: rgb(20 22 24 / 0.72);
  color: var(--bz-text);
  font: inherit;
  /* 16 px stops iOS zooming the page in when the field takes focus. */
  font-size: max(16px, var(--bz-font-size));
  user-select: text;
  outline: none;
  transition: border-color var(--bz-dur-3) ease, box-shadow var(--bz-dur-3) ease;
}

@media (pointer: fine) {
  .login__input {
    font-size: var(--bz-font-size);
  }
}

.login__input::placeholder {
  color: var(--bz-text-inactive);
  opacity: 1;
}

.login__input:hover {
  border-color: rgb(61 174 233 / 0.6);
}

.login__input:focus,
.login__input:focus-visible {
  border-color: var(--bz-accent);
  box-shadow: 0 0 0 1px rgb(61 174 233 / 0.35);
  outline: none;
}

.login__input--pw {
  padding-right: 38px;
}

.login__eye {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bz-text-inactive);
  cursor: pointer;
}

.login__eye:hover {
  color: var(--bz-text);
  background: rgb(252 252 252 / 0.08);
}

.login__eye[aria-pressed="true"] {
  color: var(--bz-accent);
}

.login__go {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--login-field-h);
  height: var(--login-field-h);
  padding: 0;
  border: 1px solid rgb(252 252 252 / 0.14);
  border-radius: var(--bz-radius);
  background: rgb(41 44 48 / 0.85);
  cursor: pointer;
  transition: border-color var(--bz-dur-3) ease, background-color var(--bz-dur-3) ease;
}

.login__go:hover {
  border-color: var(--bz-accent);
}

.login__go:active {
  background: var(--bz-selection-alt);
}

.login__icon {
  width: 22px;
  height: 22px;
  flex: none;
}

.login__icon--s {
  width: 16px;
  height: 16px;
}

/* One line, always there, so a message never shoves the form around. */
.login__msg {
  min-height: 20px;
  margin: 8px 0 2px;
  font-size: var(--bz-font-size);
  line-height: 20px;
  text-shadow: var(--login-shadow);
}

.login__msg.is-error {
  font-weight: 600;
}

/* ---------- session picker ---------- */

.login__session {
  position: relative;
}

.login__session[hidden] {
  display: none;
}

.login__session-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: var(--bz-radius);
  background: transparent;
  color: var(--bz-text-inactive);
  text-shadow: var(--login-shadow);
  cursor: pointer;
}

.login__session-btn:hover,
.login__session-btn[aria-expanded="true"] {
  color: var(--bz-text);
  background: rgb(252 252 252 / 0.08);
}

.login__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 50%;
  min-width: 190px;
  padding: 4px 0;
  border: 1px solid rgb(252 252 252 / 0.1);
  border-radius: var(--bz-radius);
  background: var(--bz-window);
  box-shadow: var(--bz-shadow-window);
  transform: translateX(-50%);
  text-align: left;
}

.login__menu[hidden] {
  display: none;
}

.login__menu-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 6px 14px 6px 32px;
  border: 0;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.login__menu-item:hover,
.login__menu-item:focus-visible {
  background: var(--bz-selection-alt);
  outline: none;
}

/* Breeze's radio: a ring, filled with the accent when checked. */
.login__menu-item::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 1px solid var(--bz-text-inactive);
  border-radius: 50%;
}

.login__menu-item[aria-checked="true"]::before {
  border-color: var(--bz-accent);
  background: radial-gradient(circle, var(--bz-accent) 0 3px, transparent 3.5px);
}

/* ---------- lock screen extras ---------- */

.login__media {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 288px;
  max-width: 100%;
  margin-top: 22px;
  padding: 8px;
  border: 1px solid rgb(252 252 252 / 0.08);
  border-radius: var(--bz-radius);
  background: rgb(32 35 38 / 0.55);
  text-align: left;
}

.login__media[hidden],
.login__notes[hidden] {
  display: none;
}

.login__media-art {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: rgb(252 252 252 / 0.06);
  color: var(--bz-text-inactive);
}

.login__media-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login__media-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--bz-text-inactive);
  line-height: 1.25;
}

.login__media-text b,
.login__media-text i {
  overflow: hidden;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The title is the line to read once something is playing; the artist stays quiet under it. */
.login__media.is-active .login__media-text b {
  color: var(--bz-text);
  font-weight: 600;
}

.login__media-text i {
  font-size: 12px;
}

.login__media-ctl {
  display: flex;
}

.login__media-ctl button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bz-text);
  cursor: pointer;
}

.login__media-ctl button:hover:not(:disabled) {
  background: rgb(252 252 252 / 0.12);
}

.login__media-ctl button:focus-visible {
  outline: 2px solid var(--bz-accent);
  outline-offset: 1px;
}

.login__media-ctl button:disabled {
  color: rgb(252 252 252 / 0.3);
  cursor: default;
}

.login__media-ctl .login__icon {
  width: 16px;
  height: 16px;
}

/* Where in the track it is: a hairline along the card's foot, filled by the script and never animated. */
.login__media {
  position: relative;
}

.login__media-bar {
  position: absolute;
  right: 8px;
  bottom: 2px;
  left: 8px;
  height: 2px;
  border-radius: 1px;
  background: rgb(252 252 252 / 0.1);
}

.login__media-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--bz-accent);
}

.login__media:not(.is-active) .login__media-bar {
  display: none;
}

.login__notes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  text-shadow: var(--login-shadow);
}

/* ---------- power row ---------- */

.login__actions {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 26px;
}

.login__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 78px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.login__action:focus-visible {
  outline: none;
}

.login__action-ring {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgb(252 252 252 / 0.1);
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
  transition: background-color var(--bz-dur-3) ease;
}

.login__action:hover .login__action-ring {
  background: rgb(252 252 252 / 0.2);
}

.login__action:active .login__action-ring {
  background: rgb(252 252 252 / 0.3);
}

.login__action:focus-visible .login__action-ring {
  box-shadow: 0 0 0 2px var(--bz-accent);
}

.login__action-label {
  white-space: nowrap;
  text-shadow: var(--login-shadow);
}

/* ---------- corners ---------- */

.login__corner {
  position: absolute;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  text-shadow: var(--login-shadow);
  opacity: 0;
  transition: opacity var(--login-form-ms) ease;
}

.login__corner .login__icon {
  width: 18px;
  height: 18px;
}

.login__corner--l {
  left: 10px;
}

.login__corner--r {
  right: 10px;
}

.login.is-active .login__corner {
  opacity: 1;
}

.login.is-done {
  pointer-events: none;
}

/* ---------- small screens ---------- */

@media (max-height: 700px) {
  .login__form {
    margin-top: 20px;
  }

  .login__avatar {
    width: 96px;
    height: 96px;
  }

  .login__actions {
    margin-top: 16px;
  }
}

@media (max-width: 360px) {
  .login__action {
    min-width: 68px;
  }
}

/*
  A phone on its side is 375 px tall or less, with the keyboard still to come.
  Once the screen is awake the clock has done its job and steps aside, the
  avatar shrinks, and the notification line and the player card (which the
  lock screen can do without for as long as the phone is turned) go; what is
  left is the name, the field and the power buttons, in a row that fits.
  Asleep, the clock is still all there is, so it stays.
*/
@media (max-height: 420px) {
  .login__stage {
    padding: 8px 16px 40px;
  }

  .login.is-active .login__clock {
    display: none;
  }

  /* The clock was what held the top margin; with it gone the form takes the whole centring. */
  .login.is-active .login__reveal {
    margin-top: auto;
  }

  .login__time {
    font-size: min(72px, 22vh);
    letter-spacing: -2px;
  }

  .login__date {
    font-size: min(24px, 7vh);
  }

  .login__form {
    margin-top: 0;
  }

  .login__avatar {
    width: 56px;
    height: 56px;
  }

  .login__name {
    margin: 6px 0 10px;
    font-size: 18px;
  }

  .login__name[hidden] {
    margin-bottom: 10px;
  }

  .login__media,
  .login__notes {
    display: none;
  }

  .login__actions {
    margin-top: 8px;
  }

  .login__action {
    gap: 4px;
    min-width: 64px;
    padding: 2px;
  }

  .login__action-ring {
    width: 38px;
    height: 38px;
  }
}

/* ---------- motion ---------- */

:root[data-anim="off"] .login {
  --login-blur-ms: 0ms;
  --login-form-ms: 0ms;
}

:root[data-anim="off"] .login__row.is-shaking {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .login {
    --login-blur-ms: 0ms;
    --login-form-ms: 0ms;
  }

  .login__row.is-shaking {
    animation: none;
  }
}