/* Screens before the dashboard: sign-in, no access, errors, and the registration pages
   (register.html). A Fideres panel on the left, the screen on the right; on a phone the panel
   becomes a band across the top.

   Brand: the square Fideres logo (brand/fideres-logo.png, Marketing's "Icon Fideres logo"),
   the Fideres word mark as in the dashboard header (Proxima Nova Medium, 26px, .5px tracking;
   white here, as orange on slate is too faint to read), slate blue #535776 panel, orange
   #EE712B accents and headings, primary buttons in the darker orange #B4511A the dashboard
   uses so white text passes WCAG AA. Colours come from colours.css; dark mode (the
   computer's setting, or data-theme="dark") uses the dashboard's dark colours, the same
   switches as dashboard.css. The panel, logo and orange headings look the same in both. */

html,
body {
  height: 100%;
  margin: 0;
}

.auth {
  --auth-primary: #b4511a; /* dashboard.css --orange-text (light) */
  --auth-primary-hover: #9c4616;
  --auth-link: #b4511a;
  --auth-bg: var(--plain-white);
  --auth-text: var(--fideres-dark-grey);
  --auth-muted: var(--fideres-text-dark-grey);
  --auth-line: #d7d7d7;
  --auth-input: var(--plain-white);
  --auth-hover: var(--fideres-table-light-grey);
  /* Microsoft's own button colours: light, and dark below. */
  --auth-ms-bg: #ffffff;
  --auth-ms-text: #5e5e5e;
  --auth-ms-border: #8c8c8c;
  display: flex;
  min-height: 100vh;
  font-family: ProximaNova, system-ui, Arial, sans-serif;
  color: var(--auth-text);
  background: var(--auth-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth {
    --auth-bg: #1e1f24;
    --auth-text: #d8d8d8;
    --auth-muted: #a6a9af;
    --auth-line: #33353d;
    --auth-input: #2a2b32;
    --auth-hover: #2a2b32;
    --auth-ms-bg: #2f2f2f;
    --auth-ms-text: #ffffff;
    --auth-ms-border: #2f2f2f;
    --auth-link: #f0884a;
  }
}

:root[data-theme="dark"] .auth {
  --auth-link: #f0884a;
  --auth-bg: #1e1f24;
  --auth-text: #d8d8d8;
  --auth-muted: #a6a9af;
  --auth-line: #33353d;
  --auth-input: #2a2b32;
  --auth-hover: #2a2b32;
  --auth-ms-bg: #2f2f2f;
  --auth-ms-text: #ffffff;
  --auth-ms-border: #2f2f2f;
}

/* The dashboard shows its own page once signed in: hide the panel with the screens
   (main.js also sets [hidden], for browsers without :has()). */
.auth[hidden],
.auth:not(:has(.screen:not([hidden]))) {
  display: none;
}

/* ---------- the Fideres panel ---------- */
.auth-brand {
  flex: 0 0 38%;
  max-width: 520px;
  box-sizing: border-box;
  padding: 48px 56px;
  background: var(--fideres-blue);
  color: var(--plain-white);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.auth-brand .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand .brand img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 4px;
}

.auth-brand .mark {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: var(--plain-white);
}

.auth-brand .product {
  margin: 0;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.25;
  color: var(--plain-white);
}

.auth-brand .product::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 20px;
  background: var(--fideres-orange);
}

.auth-brand .by {
  margin: 12px 0 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- the screen ---------- */
.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 48px 24px;
  background: var(--auth-bg);
}

.auth .login-container {
  width: 100%;
  max-width: 400px;
  background: none;
}

.auth .login-container.wide {
  max-width: 640px;
}

.auth .login-box {
  background: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

.auth .login-box h2 {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--fideres-orange);
}

.auth .login-box p {
  margin: 0 0 24px;
  line-height: 1.5;
  color: var(--auth-muted);
}

.auth .login-box p.hint {
  margin: 10px 0 0;
  font-size: 13px;
}

/* Buttons: full width, stacked. */
.auth .btn,
.auth .ms-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 11px 16px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth .btn {
  border: 1px solid var(--auth-line);
  background: var(--auth-input);
  color: var(--auth-text);
}

.auth .btn.primary {
  border-color: var(--auth-primary);
  background: var(--auth-primary);
  color: var(--plain-white);
  font-weight: 700;
}

.auth .btn.primary:hover {
  background: var(--auth-primary-hover);
  border-color: var(--auth-primary-hover);
}

.auth .ms-signin-btn {
  border: 1px solid var(--auth-ms-border);
  background: var(--auth-ms-bg);
  color: var(--auth-ms-text);
}

.auth .ms-signin-btn:hover,
.auth .btn:not(.primary):hover {
  background: var(--auth-hover);
  border-color: var(--auth-muted);
}

.ms-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* "Fideres staff" between the client sign-in and the Microsoft button. */
.auth .login-box p.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: 13px;
  color: var(--auth-muted);
}

.auth .login-box p.auth-or[hidden] {
  display: none;
}

.auth .login-box p.auth-or::before,
.auth .login-box p.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--auth-line);
}

.auth .login-box p.auth-help {
  margin: 28px 0 0;
  font-size: 13px;
}

/* Forms (ask for a new link). */
.auth label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.auth input[type="email"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--auth-line);
  border-radius: 4px;
  background: var(--auth-input);
  font-family: inherit;
  font-size: 15px;
  color: var(--auth-text);
}

.auth input:focus,
.auth .btn:focus-visible,
.auth .ms-signin-btn:focus-visible,
.auth a:focus-visible {
  outline: 2px solid var(--auth-primary);
  outline-offset: 2px;
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .auth {
    flex-direction: column;
  }

  .auth-brand {
    flex: none;
    max-width: none;
    padding: 20px 24px;
    gap: 14px;
  }

  .auth-brand .brand img {
    width: 36px;
    height: 36px;
  }

  .auth-brand .mark {
    font-size: 22px;
  }

  .auth-brand .product {
    font-size: 20px;
  }

  .auth-brand .product::before {
    display: none;
  }

  .auth-brand .by {
    display: none;
  }

  .auth-main {
    align-items: flex-start;
    padding: 32px 24px;
  }
}

/* ---------- account set-up (register.html) ---------- */
/* Progress: 1 Confirm, 2 Verify email, 3 Add mobile, 4 Done. */
.auth .auth-steps {
  display: flex;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.auth .auth-steps li {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--auth-muted);
  counter-increment: step;
}

/* The line to the next step. */
.auth .auth-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--auth-line);
}

.auth .auth-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 2px solid var(--auth-line);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--auth-muted);
  background: var(--auth-bg);
}

.auth .auth-steps li.current {
  color: var(--auth-text);
  font-weight: 700;
}

.auth .auth-steps li.current::before {
  border-color: var(--auth-primary);
  background: var(--auth-primary);
  color: var(--plain-white);
}

.auth .auth-steps li.done::before {
  content: "\2713"; /* check mark */
  border-color: var(--fideres-blue);
  background: var(--fideres-blue);
  color: var(--plain-white);
}

.auth .auth-steps li.done:not(:last-child)::after {
  background: var(--fideres-blue);
}

/* Who the invitation is for. */
.auth .auth-details {
  margin: 0 0 24px;
  padding: 4px 16px;
  border: 1px solid var(--auth-line);
  border-radius: 6px;
  background: var(--auth-hover);
}

.auth .auth-details div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.auth .auth-details div + div {
  border-top: 1px solid var(--auth-line);
}

.auth .auth-details dt {
  font-size: 13px;
  color: var(--auth-muted);
}

.auth .auth-details dd {
  margin: 0;
  font-weight: 700;
  color: var(--auth-text);
  text-align: right;
  overflow-wrap: anywhere;
}

.auth .login-box h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--auth-text);
}

/* What happens next. */
.auth .auth-next {
  margin: 0 0 24px;
  padding-left: 20px;
  line-height: 1.5;
  color: var(--auth-muted);
}

.auth .auth-next li + li {
  margin-top: 6px;
}

.auth .auth-next strong {
  color: var(--auth-text);
}

/* When the link stops working. */
.auth .login-box p.auth-notice {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--fideres-orange);
  background: var(--auth-hover);
  font-size: 13px;
}

.auth .login-box p.auth-notice[hidden] {
  display: none;
}

/* The finished screen's tick. */
.auth .auth-success {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  border-radius: 50%;
  background: var(--fideres-green);
  color: var(--plain-white);
  font-size: 26px;
  font-weight: 700;
}

/* Accepting the privacy policy and terms of use before setting up the account. */
.auth .auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--auth-text);
}

.auth .auth-consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--auth-primary);
}

.auth .auth-consent label {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
}

.auth .auth-consent a[href] {
  color: var(--auth-link);
  text-decoration: underline;
}

.auth .btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth .login-box p.hint[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .auth .auth-steps li {
    font-size: 11px;
  }
}