/* ------------------------------------------------------------------
   login.css - the xdm login panel at the end of the start up.

   A box of user icons sits at the top, the two fields below it, and
   the name of the machine in the bottom left corner. It is drawn in
   the same grey as every other Motif widget: design/login.png only
   looks blue because the picture was taken off a screen with a phone.
   See design/login_origin.png.
   ------------------------------------------------------------------ */

#boot-login {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lg-panel {
  width: min(62vw, 580px);
  padding: 16px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  color: var(--ink);
}

/* --- The box of accounts --------------------------------------------
   A sunken area with one icon per account. The scroll bar is always
   there, even with two accounts, the way xdm draws it. */

.lg-users {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  height: 290px;
  padding: 10px;
  overflow-y: scroll;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  scrollbar-color: var(--face) var(--face-dk);
}

.lg-users::-webkit-scrollbar-track {
  background: var(--face-dk);
  border: 1px solid var(--face-dk);
}

.lg-users::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
}

.lg-user {
  width: 96px;
  padding: 4px 2px;
  text-align: center;
}

.lg-face {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 2px solid var(--face-dk);
}

/* The account that is picked has a yellow line around its picture. */
.lg-user.sel .lg-face {
  border-color: var(--lg-mark);
}

.lg-name {
  margin-top: 3px;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: bold;
  color: var(--ink);
}

/* --- The two fields -------------------------------------------------- */

.lg-form {
  margin-top: 16px;
}

.lg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.lg-label {
  width: 120px;
  text-align: right;
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: bold;
  color: var(--ink);
}

.lg-field {
  width: 250px;
  padding: 4px 6px;
  background: var(--lg-field);
  border: 2px solid;
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  font-family: var(--font-label);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  user-select: text;
}

/* The real name of the account, written to the right of the field the
   way xdm does once an account is picked. */
.lg-real {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  color: var(--ink);
}

.lg-note {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: bold;
  color: #6d0000;
}

/* --- The bottom row --------------------------------------------------- */

.lg-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

/* The name of the machine, in the italic that SGI put on the case of
   every workstation. */
.lg-logo {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 26px;
  font-style: italic;
  font-weight: bold;
  color: var(--ink-dim);
}

.lg-btn {
  min-width: 90px;
  padding: 4px 14px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  font-family: var(--font-label);
  font-size: 14px;
  color: var(--ink);
}

.lg-btn:active {
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  background: var(--lg-field);
}