/* auth.css — the door. */

.view.bare { display: block; overflow: auto; background: var(--bg); }

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 20px;
}

.auth-box {
  width: min(420px, 100%);
  padding: 28px 30px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  margin-bottom: 22px;
}
.auth-brand .brand-mark { color: var(--brand); font-size: 17px; }
.auth-brand .brand-name { font-size: 16px; font-weight: 800; }
.auth-brand .brand-sub { color: var(--faint); font-size: 12px; }

.auth-form h1 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.auth-sub { margin: 0 0 18px; color: var(--dim); font-size: 12.5px; line-height: 1.55; }

.auth-f { display: block; margin-bottom: 13px; }
.auth-f > span {
  display: block;
  margin-bottom: 4px;
  color: var(--dim);
  font-size: 11.5px;
  font-weight: 600;
}
.auth-f .field { padding: 9px 11px; font-size: 13.5px; }

.pw-meter {
  height: 4px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--panel-2);
  overflow: hidden;
}
.pw-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--danger);
  transition: width .2s, background .2s;
}
.pw-fill.ok { background: var(--warn); }
.pw-fill.good { background: var(--good); }

.auth-note { margin: 4px 0 0; font-size: 11px; }
.auth-note.ok { color: var(--good); }
.auth-note.bad { color: var(--warn); }

.auth-err {
  margin: 4px 0 12px;
  padding: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  min-height: 15px;
}

.auth-go { width: 100%; padding: 10px; font-size: 13.5px; }
.auth-go:disabled { opacity: .6; cursor: default; }

.auth-hint {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
}

.auth-foot {
  max-width: 420px;
  margin: 0;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.6;
  text-align: center;
}

/* the one-time password an admin reads out */
.temp-pw {
  margin: 10px 0;
  padding: 12px;
  border: 1px dashed var(--brand);
  border-radius: 8px;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  user-select: all;
}

/* ─────────── the chip in the bar ─────────── */

.who-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  flex: 0 0 20px;
}
.who-two { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.who-two .who-name { font-size: 11.5px; font-weight: 700; }
.who-two .who-role { font-size: 9.5px; color: var(--faint); }

/* ─────────── my account ─────────── */

.acct-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel-2);
}
.acct-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 46px;
  text-align: center;
}
.acct-who { flex: 1; min-width: 0; }
.acct-name { font-size: 15px; font-weight: 800; }
.acct-email { color: var(--dim); font-size: 12px; }
.acct-roleline { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.acct-role {
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}
.acct-hint { margin-top: 4px; color: var(--faint); font-size: 11px; line-height: 1.45; }

.acct-caps {
  text-align: center;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.acct-caps b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.acct-caps span { display: block; color: var(--faint); font-size: 10px; }
.acct-caps-l { text-transform: uppercase; letter-spacing: .05em; }

.acct-perms { display: flex; flex-direction: column; gap: 12px; }
.acct-perm-group h4 {
  margin: 0 0 4px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.acct-perm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
}
.acct-tick { color: var(--good); font-size: 11px; width: 12px; }
.acct-perm.no { color: var(--faint); }
.acct-perm.no .acct-tick { color: var(--danger); }

.acct-missing { margin-top: 14px; }
.acct-missing summary {
  cursor: pointer;
  color: var(--dim);
  font-size: 12px;
  padding: 5px 0;
}
.acct-missing summary:hover { color: var(--text); }

.sess-box { display: flex; flex-direction: column; gap: 5px; }
.sess-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
}
.sess-row.here { border-color: var(--brand); }
.sess-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.sess-dot.on { background: var(--good); }
.sess-main { flex: 1; min-width: 0; }
.sess-what { font-size: 12.5px; font-weight: 600; }
.sess-when { color: var(--faint); font-size: 11px; }

.auth-brand .brand-logo { max-height: 76px; width: auto; margin: 0 auto 4px; }
.auth-brand.has-logo .brand-mark, .auth-brand.has-logo .brand-name, .auth-brand.has-logo .brand-sub { display: none; }