/* Celero client login mockup — app.celerosoftware.ai
   Reuses tokens, .wrap and .btn classes from styles.css.
   Colour discipline carried over: coral stays reserved for the
   single primary action per screen; everything else is ink/cobalt/paper. */

body.auth-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
}

.auth-nav {
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) 0;
}
.auth-nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.auth-logo { height: 22px; display: block; }
.auth-domain {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-55);
  letter-spacing: 0.04em;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: none;
}
.auth-card.is-active { display: block; }

.auth-step {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cobalt);
  display: block;
  margin-bottom: 0.75rem;
}
.auth-card h1 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.auth-card > p.auth-sub {
  color: var(--ink-70);
  font-size: 0.92rem;
  margin-bottom: 1.75rem;
  max-width: 40ch;
}

/* Auth panels are stacked forms; the demo nav sits below them. */
.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.auth-field { margin-bottom: 0; }
.auth-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-55);
  margin-bottom: 0.4rem;
}
.auth-field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
}
.auth-field input:focus { outline: 2px solid var(--cobalt); outline-offset: 1px; }

.auth-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-70);
  cursor: pointer;
}
.auth-check input { margin: 0; cursor: pointer; }

.auth-card .btn { width: 100%; padding: 0.75rem 1rem; font-size: 0.85rem; cursor: pointer; border: none; }

.auth-mail-target {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  word-break: break-all;
}

.auth-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cobalt);
  cursor: pointer;
}
.auth-link-btn:hover { text-decoration: underline; }

.auth-foot {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.82rem;
  color: var(--ink-55);
}
.auth-foot a { color: var(--cobalt); text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

.auth-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}


/* ---- Additions: secondary buttons, SSO, MFA, invite, lockout, landing ---- */

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover { background: var(--paper); }

.auth-idp { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.auth-idp-mark { width: 14px; height: 14px; display: inline-block; border-radius: 2px; }
.auth-idp-mark.is-ms {
  background:
    linear-gradient(#F25022 0 0) 0 0 / 6px 6px no-repeat,
    linear-gradient(#7FBA00 0 0) 8px 0 / 6px 6px no-repeat,
    linear-gradient(#00A4EF 0 0) 0 8px / 6px 6px no-repeat,
    linear-gradient(#FFB900 0 0) 8px 8px / 6px 6px no-repeat;
}
.auth-idp-mark.is-g {
  border-radius: 50%;
  background: conic-gradient(#EA4335 0 25%, #FBBC05 0 50%, #34A853 0 75%, #4285F4 0);
}

.auth-error { margin-top: 0.5rem; font-size: 0.8rem; color: #B3261E; }
.auth-error[hidden] { display: none; }

.auth-code { font-family: var(--font-mono); letter-spacing: 0.35em; text-align: center; font-size: 1.15rem !important; }

.auth-or {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0; font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-55);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

.auth-demo { margin-top: 1.25rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-55); }
.auth-demo code { font-family: var(--font-mono); font-size: 0.7rem; background: var(--paper); padding: 0 0.25rem; border-radius: 2px; }

.auth-facts { margin: 0 0 1.5rem; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.auth-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; font-size: 0.82rem; }
.auth-facts div + div { border-top: 1px solid var(--border-soft); }
.auth-facts dt { color: var(--ink-55); }
.auth-facts dd { margin: 0; text-align: right; }

.auth-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.auth-choice legend {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-55); margin-bottom: 0.4rem; padding: 0;
}
.auth-choice label {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.75rem; cursor: pointer;
}
.auth-choice label span { margin-left: auto; font-size: 0.72rem; color: var(--ink-55); }

.auth-context { list-style: none; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.auth-context li { display: flex; justify-content: space-between; padding: 0.6rem 0.75rem; font-size: 0.85rem; }
.auth-context li + li { border-top: 1px solid var(--border-soft); }
.auth-context span { color: var(--ink-55); }
.auth-progress { height: 3px; background: var(--paper); border-radius: 2px; overflow: hidden; }
.auth-progress i { display: block; height: 100%; width: 0; background: var(--cobalt); animation: auth-fill 2s ease-out forwards; }
@keyframes auth-fill { to { width: 100%; } }

.auth-demo-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.9rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.auth-demo-nav span { color: var(--ink-55); }
.auth-demo-nav button, .auth-demo-nav a {
  background: none; border: 0; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit;
  color: var(--cobalt); cursor: pointer; text-decoration: none;
}
.auth-demo-nav button:hover, .auth-demo-nav a:hover { text-decoration: underline; }

/* ---- Admin: access and login log (access.html) ---- */
.acc-main { width: 100%; max-width: 1040px; margin: 0 auto; padding: 2rem clamp(1.25rem, 4vw, 2.5rem) 3rem; }
.acc-main h1 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.acc-main > p { color: var(--ink-70); font-size: 0.92rem; margin-bottom: 2rem; max-width: 60ch; }
.acc-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.acc-tabs button {
  background: none; border: 0; padding: 0.6rem 0; font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-55); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.acc-tabs button.is-active { color: var(--ink); border-bottom-color: var(--cobalt); }
.acc-pane { display: none; }
.acc-pane.is-active { display: block; }
.acc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.acc-card h2 { font-size: 0.95rem; margin-bottom: 0.9rem; }
.acc-invite { display: grid; grid-template-columns: 2fr 1.2fr auto; gap: 0.75rem; align-items: end; }
.acc-invite .auth-field select {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 0.92rem; background: var(--paper);
}
.acc-invite .btn { width: auto; padding: 0.75rem 1.25rem; border: 0; cursor: pointer; }
.acc-flags { display: flex; gap: 1.25rem; margin-top: 0.9rem; flex-wrap: wrap; }
.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.acc-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-55); font-weight: 500; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
}
.acc-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.acc-table .mono { font-family: var(--font-mono); font-size: 0.78rem; }
.acc-pill { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 2px; background: var(--paper); }
.acc-pill.is-ok { color: #1B6B3A; background: rgba(27,107,58,0.1); }
.acc-pill.is-warn { color: #8A5A00; background: rgba(138,90,0,0.12); }
.acc-pill.is-bad { color: #B3261E; background: rgba(179,38,30,0.1); }
.acc-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.acc-toolbar .btn { width: auto; padding: 0.55rem 1rem; cursor: pointer; }
.acc-note { font-size: 0.78rem; color: var(--ink-55); margin-top: 0.9rem; }
.acc-rowbtn { background: none; border: 0; color: var(--cobalt); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0; }
.acc-rowbtn:hover { text-decoration: underline; }
.acc-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.acc-settings dl { margin: 0; }
.acc-settings dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--border-soft); font-size: 0.85rem; }
.acc-settings dt { color: var(--ink-70); }
.acc-settings dd { margin: 0; font-weight: 500; text-align: right; }
@media (max-width: 720px) { .acc-invite { grid-template-columns: 1fr; } }

/* ---- Celero internal: new client setup (client-setup.html) ---- */
.cs-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.cs-form .acc-card { margin-bottom: 1rem; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem; }
.cs-select {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 0.92rem; background: var(--paper);
}
.cs-submit { width: 100%; padding: 0.85rem 1rem; border: 0; cursor: pointer; }
.cs-preview { position: sticky; top: 1rem; }
.cs-mail { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; font-size: 0.85rem; }
.cs-mail p { margin: 0 0 0.75rem; color: var(--ink-70); }
.cs-mail hr { border: 0; border-top: 1px solid var(--border-soft); margin: 0.9rem 0; }
.cs-mail-meta span { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-55); margin-right: 0.4rem; }
.cs-mail-btn { display: inline-block; background: var(--cobalt); color: var(--white) !important; padding: 0.55rem 1.1rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cs-mail-fine { font-size: 0.75rem; color: var(--ink-55) !important; margin: 0 !important; }
.cs-steps { list-style: none; margin: 0; padding: 0; counter-reset: cs; }
.cs-steps li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--border-soft); font-size: 0.88rem; color: var(--ink-55); }
.cs-steps li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--border); border-radius: 50%; flex: none; }
.cs-steps li.is-done { color: var(--ink); }
.cs-steps li.is-done::before { background: var(--cobalt); border-color: var(--cobalt); }
.cs-done[hidden], .cs-layout[hidden] { display: none; }

/* Dashboard access picker: category groups with per-dashboard checkboxes */
.cs-access-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.cs-access-bar .acc-pill { white-space: normal; }
.cs-access-links { display: flex; gap: 1rem; }
.cs-cat { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.6rem; overflow: hidden; }
.cs-cat-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.75rem; background: var(--paper); font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.cs-cat-head input { margin: 0; cursor: pointer; }
.cs-cat-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-55); }
.cs-cat-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem 1rem; padding: 0.75rem; border-top: 1px solid var(--border-soft); }
@media (max-width: 520px) { .cs-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-access-summary { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ink-70); }
.cs-access-summary strong { color: var(--ink); font-weight: 600; }
.cs-submit:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 860px) { .cs-layout { grid-template-columns: 1fr; } .cs-preview { position: static; } }

/* ---- Submit feedback: press, spinner, success tick; blocks repeat actions ---- */
.auth-card .btn { position: relative; transition: transform 0.12s ease, background 0.2s ease, opacity 0.2s ease; }
.auth-card .btn:active:not(:disabled) { transform: scale(0.97); }
.auth-card .btn.is-busy,
.auth-card .btn.is-done { pointer-events: none; cursor: progress; }
.auth-card .btn.is-busy:disabled { opacity: 1; }
.auth-card .btn.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.85em; height: 0.85em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}
.auth-card .btn.is-done { background: var(--cobalt-dark); }
.auth-card .btn.is-done::after {
  content: "\2713";
  margin-left: 0.5em;
  animation: auth-pop 0.25s ease-out;
}
.auth-form.is-locked input { pointer-events: none; opacity: 0.7; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .auth-card .btn, .auth-card .btn::after { animation: none !important; transition: none; }
}