/* credential.css: Litofane identity for the auth.litofane.com credential pages
   (PRO-371, DEC-0182, DEC-0145/DEC-0149). Colours, fonts, radii and shadows come
   from the vendored design-system kit under /ds (PRO-432, DEC-0190 r.3,
   DEC-0193): every page loads /ds/styles.css and /ds/products/sales/sales.css
   before this file. The pages follow the OS theme, light and dark. */

/* --- Reset --- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Base --- */

/* No bare a rule is set here: the kit's tokens/focus.css supplies the base anchor
   rule (ink text, teal underline, two-tone focus ring, DEC-0157), and the footer
   and click-wrap links take it unchanged. The forgot-password control is a button,
   so it sets the same ink text and teal underline from the kit's link tokens. */

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--surface-page);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Split-screen shell --- */

/* Fixed-viewport shell: the brand panel is nailed to the viewport and the
   form column scrolls internally (PRO-397 layout fix). */
.acc-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-page);
}

/* --- Brand panel (left) --- */

/* Brand panel stretches to the fixed shell height (PRO-397 layout fix). It stays
   black in both themes, so it sits on the ink and white primitives rather than
   on semantic tokens (Louis ruling 3, 2026-10-06). */
.acc-aside {
  width: 44%;
  flex: none;
  background: var(--neutral-950);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  overflow: hidden;
}

.acc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acc-mark { display: block; }

.acc-tag {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.acc-copy { max-width: 400px; }

.acc-copy img { height: 38px; width: auto; display: block; }

.acc-copy h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 30px 0 0;
  color: var(--white);
}

.acc-copy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-300);
  margin: 18px 0 0;
  max-width: 360px;
}

.acc-brandfoot {
  font-size: 12px;
  color: var(--neutral-500);
}

/* In dark the panel takes the page ground, so both halves are the same black
   (Louis visual review, 2026-10-06), and a 1px divider separates them (Louis
   ruling 3, 2026-10-06). Follows the OS, or data-theme, the way the kit does;
   the stacked mobile layout is handled after the max-width block below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .acc-aside {
    background: var(--surface-page);
    border-right: 1px solid var(--border-default);
  }
}
:root[data-theme="dark"] .acc-aside {
  background: var(--surface-page);
  border-right: 1px solid var(--border-default);
}

/* --- Form panel (right) --- */

/* Form panel scrolls internally so its height changes never affect the
   shell or the brand panel (PRO-397 layout fix). */
.acc-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 32px;
  height: 100%;
  overflow-y: auto;
}

/* --- LITOFANE.sales wordmark --- */

.acc-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.acc-wordmark span { color: var(--accent); }

/* --- Subtitle --- */

.acc-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 10px 0 22px;
}

/* --- Tab bar (cross-page links between /signin and /signup) --- */

.acc-tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-hover);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  gap: 2px;
  width: 100%;
  margin-bottom: 22px;
}

.acc-tabs a {
  flex: 1;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, color 120ms, box-shadow 120ms;
  background: transparent;
  color: var(--text-tertiary);
}

.acc-tabs a.active {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.acc-tabs a:hover:not(.active) {
  color: var(--text-primary);
}

/* --- Legacy layout (header + page + card) --- */

header {
  display: none;
}

.header-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.page {
  display: flex;
  justify-content: center;
  padding: 48px 24px;
}

/* --- Card (form container) --- */

.card {
  width: 100%;
  max-width: 400px;
}

h2 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-primary);
}

/* --- Form fields --- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-primary);
}

input[type="email"],
input[type="password"],
input[type="text"],
select {
  display: block;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 40px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}

/* No select is used on these pages, so there is no chevron rule here. A mask on
   the select itself would mask the whole control: a future select needs a
   wrapper with a masked ::after (PRO-432). */
select {
  cursor: pointer;
}

input:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

input.invalid, select.invalid { border-color: var(--state-error); }

/* --- Buttons --- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
  transition: background 120ms;
}

.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-press); }
.btn-primary:disabled { background: var(--control-track); cursor: not-allowed; }

/* Submit-button loading spinner (item 4, PRO-383). A CSS-only spinner shown
   while the is-loading class is present; the ::before pseudo-element coexists
   with the button's textContent swap, so no innerHTML change is needed. White
   on the disabled grey button for contrast. */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-primary.is-loading::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid color-mix(in srgb, var(--white) 50%, transparent);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms;
}

.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Error and success boxes --- */

/* Status colours are the kit's state tokens; each border is derived from its
   token with color-mix, so no local colour value is held here (ruling 2). */
.error-box {
  display: none;
  background: var(--state-error-bg);
  border: 1px solid color-mix(in srgb, var(--state-error) 40%, var(--surface-page));
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--state-error);
  margin-bottom: 16px;
}

.success-box {
  display: none;
  background: var(--state-success-bg);
  border: 1px solid color-mix(in srgb, var(--state-success) 40%, var(--surface-page));
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: 14px;
  color: var(--state-success);
  line-height: 1.5;
}

/* --- Checkbox --- */

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

.checkbox-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.checkbox-field span,
.checkbox-field label {
  font-size: 14px;
  color: var(--text-tertiary);
  font-weight: 400;
  line-height: 1.4;
}

/* --- Beta opt-in card (PRO-397 reframe) --- */

.beta-optin-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--surface-hover);
  margin-bottom: 16px;
}

.beta-optin-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.beta-optin-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  cursor: pointer;
}

.beta-optin-sub {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.45;
  margin-top: 4px;
}

/* --- Role picker (PRO-397 role picker) --- */

.role-picker {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Margin-based spacing instead of gap so collapsing buttons can animate
   their spacing to zero (PRO-397 motion polish). */
.role-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* The hidden attribute replaces the former inline display:none, which the
   style-src 'self' policy blocks (PRO-432). These two elements set their own
   display above, and an author display beats the browser's hidden rule, so the
   attribute needs this rule to take effect. */
.role-col[hidden],
.beta-optin-card[hidden] {
  display: none;
}

.role-btn {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, opacity 0.2s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease, border-width 0.22s ease;
}

.role-col .role-btn:last-child { margin-bottom: 0; }

.role-btn.is-collapsing {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

.role-btn:hover {
  border-color: var(--text-tertiary);
  background: var(--surface-hover);
}

.role-btn.selected {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--text-primary);
  font-weight: 500;
}

@media (max-width: 480px) {
  .role-picker {
    flex-direction: column;
  }
}

/* --- reCAPTCHA --- */

.recaptcha-container {
  margin-bottom: 16px;
}

/* Google draws its own raised border and shadow inside the reCAPTCHA iframe,
   which cannot be styled from here. Measured on the live widget (PRO-432 Turn
   12): the iframe is 304 by 78 CSS px; the widget box is 302 by 76 at its top
   left, with a 1px border, and a 2px light shadow strip runs along its right
   and bottom edges, which shows as a bevel on the dark page. So the container
   clips to the 300 by 74 interior, moves the widget 1px up and left so that
   interior fills it, and draws a flat 1px border like the inputs. :not(:empty)
   keeps an empty box from showing before the widget renders. */
.recaptcha-container:not(:empty) {
  box-sizing: border-box;
  width: 302px;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

.recaptcha-container:not(:empty) > div:first-child {
  position: relative;
  top: -1px;
  left: -1px;
}

/* --- Reset-password section (inline in signin) --- */

.reset-section {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-hairline);
}

.reset-section .field { margin-bottom: 12px; }

.reset-success {
  display: none;
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 10px;
}

/* --- Forgot link --- */

.forgot-link {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
}

.forgot-link button {
  background: transparent;
  border: none;
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 2px;
  font-size: 14px;
  font-family: var(--font-ui);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

/* --- Footer link --- */

.footer-link {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

.footer-link a {
  font-weight: 500;
}

/* Tighter top margin for the footer link inside a success box; replaces the
   former inline style on the email-change pages (PRO-432). Must follow the
   .footer-link rule above. */
.footer-link-compact { margin-top: 1rem; }

/* --- Click-wrap (first-login acceptance, DEC-0116 / DEC-0159) --- */

.clickwrap-intro {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  line-height: 1.5;
}


/* Registration click-wrap container on signup (PRO-396). */
#registration-clickwrap {
  margin-bottom: 16px;
}

/* --- Password-criteria widget (PRO-396) --- */

.password-criteria-list {
  list-style: none;
  margin: 8px 0 0;
  column-count: 2;
  column-gap: 18px;
  column-rule: 0.5px solid var(--border-default);
}

.criterion {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  line-height: 1.6;
  break-inside: avoid;
  margin-bottom: 4px;
}

/* Tick/cross indicator via ::before pseudo-element (flex child, centred). */
.criterion::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: var(--surface-card);
  transition: border-color 120ms, background 120ms;
}

/* Unmet state: muted text, empty circle. */
.criterion.unmet {
  color: var(--text-tertiary);
}

/* Met state: teal filled circle, ink text. */
.criterion.met {
  color: var(--text-primary);
}

.criterion.met::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* --- Account page --- */

#back-link {
  margin-bottom: 16px;
}

#actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

/* --- Two-column grid (signup company + role) --- */

.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* --- SSO footer line --- */

.acc-sso-note {
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 2px 0 0;
}

/* --- Responsive: mobile breakpoint (matches mockup at 760px) --- */

@media (max-width: 760px) {
  html, body { height: auto; }

  .acc-shell {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .acc-main {
    height: auto;
    overflow: visible;
  }

  .acc-aside {
    width: 100%;
    padding: 22px 24px 26px;
  }

  .acc-brandfoot { display: none; }
  .acc-mark { display: none; }
  .acc-top { justify-content: flex-end; }

  .acc-copy h1 {
    font-size: 30px;
    margin-top: 18px;
  }

  .acc-copy p {
    font-size: 14px;
    margin-top: 12px;
    max-width: none;
  }

  .acc-copy { max-width: none; }

  .acc-main {
    padding: 28px 24px 46px;
    align-items: flex-start;
  }

  .acc-grid { grid-template-columns: 1fr; }
}

/* Dark divider on the stacked mobile layout: the panel sits above the form, so
   the hairline moves from its right edge to its bottom edge. These rules must
   follow the dark divider rules above, whose selectors they match. */
@media (prefers-color-scheme: dark) and (max-width: 760px) {
  :root:not([data-theme="light"]) .acc-aside {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
}
@media (max-width: 760px) {
  :root[data-theme="dark"] .acc-aside {
    border-right: 0;
    border-bottom: 1px solid var(--border-default);
  }
}

/* Narrow-screen fallback: single-column criteria on small phones. */
@media (max-width: 360px) {
  .password-criteria-list { column-count: 1; }
}