/*
 * The sign-in door. First ours: the page at the signed-out address, in the theme's names. Then the vendor's card: each .cl-* rule draws one
 * of its elements. The vendor's own styles sit in a cascade layer and its "simple" theme leaves them at layout, so these unlayered rules win without
 * !important; where the vendor still sets a size or an alignment, a rule here sets it back to the column's.
 */

/* ---- Ours ---- */
.door { flex: 1 0 auto; display: flex; flex-direction: column; }
.door-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-7); }
.door-brand { display: inline-flex; align-items: center; gap: var(--space-4); margin: 0; font-size: var(--size-lead); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
/* The sidebar's logo size (app.css), drawn inline so it follows the page's theme rather than the system's. */
.door-logo { flex: none; width: 1.4rem; height: 1.4rem; }
.door-logo circle { fill: none; stroke-width: 15; }
.door-logo .forest { stroke: var(--logo-forest); }
.door-logo .sand { stroke: var(--logo-sand); }
.door-logo .forest-fill { fill: var(--logo-forest); }
.door-logo .sand-fill { fill: var(--logo-sand); }
/* app.css makes every main a column; the door's is a row that centres its one column across and keeps it at the top. */
.door-main { flex: 1 0 auto; flex-direction: row; justify-content: center; align-items: flex-start; padding: var(--space-8) var(--space-6) var(--space-9); }
/* A dialog's width (app.css dialog.confirm): the theme holds no widths. */
.door-column { flex: 0 1 30rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); }
.door-note { display: flex; flex-direction: column; gap: var(--space-2); }
/* An inviter's address may hold nothing to break at. */
.door-note p { margin: 0; overflow-wrap: anywhere; }
.door-note-lead { font-size: var(--size-lead); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
.door-under { display: flex; flex-direction: column; gap: var(--space-4); }
.door-under p { margin: 0; }
.door-trial { font-size: var(--size-small); line-height: var(--leading-small); }
.door-legal { color: var(--quiet); font-size: var(--size-caption); line-height: var(--leading-small); }
.door-legal a { color: inherit; }
.door-slot:empty { display: none; }
.door-failed { margin: 0; }

/* ---- The vendor's card ---- */
.cl-rootBox { width: 100%; }
.cl-cardBox { width: 100%; max-width: none; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--raised); }
.cl-card { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-8); }
.cl-header { display: flex; text-align: start; flex-direction: column; gap: var(--space-2); }
.cl-headerTitle { margin: 0; font-size: var(--size-display); font-weight: var(--weight-strong); line-height: var(--leading-tight); }
.cl-headerSubtitle { margin: 0; color: var(--quiet); font-size: inherit; line-height: inherit; }
.cl-headerSubtitle:empty { display: none; }
.cl-main, .cl-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
.cl-formField { display: flex; flex-direction: column; gap: var(--space-3); }
.cl-formFieldLabelRow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cl-formFieldLabel { font-size: var(--size-small); font-weight: var(--weight-strong); line-height: var(--leading-small); }
/* The vendor caps the field at its own control height; the field is a body line in a control's padding, as the buttons are. */
.cl-formFieldInput { box-sizing: border-box; width: 100%; max-height: none; padding: var(--space-4) var(--space-5); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--raised); font-size: var(--size-body); line-height: var(--leading-small); }
.cl-formFieldInput:disabled { border-color: var(--line); background: var(--wash); color: var(--quiet); }
.cl-formButtonPrimary, .cl-socialButtonsBlockButton, .cl-alternativeMethodsBlockButton {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4) var(--space-5); font-size: var(--size-body); line-height: var(--leading-small);
}
.cl-formButtonPrimary { border-color: var(--act); background: var(--act); color: var(--act-ink); font-weight: var(--weight-strong); }
.cl-formButtonPrimary:hover:not(:disabled) { border-color: var(--act-hover); background: var(--act-hover); }
/* The vendor fades a button that is off; the page draws it off as app.css draws every button. */
.cl-button:disabled, .cl-button:disabled .cl-socialButtonsProviderIcon, .cl-formFieldInput:disabled { opacity: 1; }
.cl-formButtonPrimary.cl-loading { border-color: var(--act); background: var(--act); color: var(--act-ink); cursor: default; }
.cl-buttonArrowIcon { display: none; }
.cl-socialButtons { display: flex; flex-direction: column; gap: var(--space-4); }
/* The vendor sets the label's own smaller type, which sets the button's height too; it takes the button's. */
.cl-socialButtonsBlockButtonText { font-size: inherit; font-weight: inherit; line-height: inherit; }
.cl-socialButtonsProviderIcon { display: inline-flex; }
.cl-socialButtonsProviderIcon svg { width: var(--space-6); height: var(--space-6); }
.cl-lastAuthenticationStrategyBadge { padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--quiet); font-size: var(--size-caption); font-weight: var(--weight-regular); line-height: var(--leading-small); }
.cl-socialButtonsBlockButton .cl-lastAuthenticationStrategyBadge { position: absolute; top: 50%; right: var(--space-5); transform: translateY(-50%); }
.cl-dividerRow { display: flex; align-items: center; gap: var(--space-5); }
.cl-dividerLine { flex: 1; height: 1px; background: var(--line); }
.cl-dividerText { margin: 0; color: var(--quiet); font-size: var(--size-small); line-height: var(--leading-small); }
.cl-alert { padding: var(--space-4) var(--space-5); border: 1px solid var(--bad-line); border-radius: var(--radius); color: var(--bad); }
.cl-alertText { margin: 0; font-size: var(--size-small); line-height: var(--leading-small); }
.cl-identityPreview { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.cl-identityPreviewText { margin: 0; color: inherit; font-size: inherit; overflow: visible; white-space: normal; text-overflow: clip; min-width: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.cl-identityPreviewEditButton { flex: none; display: inline-flex; padding: var(--space-2); border: none; background: none; color: var(--act); }
.cl-identityPreviewEditButtonIcon { width: var(--space-6); height: var(--space-6); }
.cl-otpCodeField { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cl-otpCodeFieldInputs { position: relative; display: flex; gap: var(--space-4); }
.cl-otpCodeFieldInput {
  position: relative; margin: 0; padding: 0; outline: none; box-shadow: none; max-height: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: calc(var(--space-8) + var(--space-5)); height: var(--space-9); border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--raised); font-family: var(--font-mono); font-size: var(--size-title); line-height: var(--leading-glyph);
}
.cl-otpCodeFieldInput[data-feedback="error"] { border-color: var(--bad); }
.cl-otpCodeFieldInput[data-feedback="success"] { border-color: var(--ink); }
.cl-otpCodeFieldInput[data-focus-within="true"] { outline: 2px solid var(--act); outline-offset: 2px; }
/* The vendor sets the resend line beside the boxes in the form, not inside the field; it stands as close under them as the field's own gap. */
.cl-formResendCodeLink { align-self: flex-start; justify-content: flex-start; margin-top: calc(var(--space-4) - var(--space-6)); text-align: start; }
.cl-otpCodeFieldErrorText { margin: 0; color: var(--bad); font-size: var(--size-small); line-height: var(--leading-small); }
.cl-formResendCodeLink, .cl-footerActionLink, .cl-backLink { padding: 0; border: none; background: none; color: var(--act); font-size: var(--size-small); line-height: var(--leading-small); text-decoration: underline; }
.cl-formResendCodeLink:hover:not(:disabled), .cl-footerActionLink:hover, .cl-backLink:hover { background: none; text-decoration-thickness: 2px; }
.cl-formResendCodeLink:disabled { border: none; background: none; color: var(--quiet); text-decoration: none; }
.cl-footerAction { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--size-small); line-height: var(--leading-small); }
.cl-footerActionText { color: var(--quiet); }
.cl-footerActionLink { font-weight: inherit; }
.cl-backRow { display: flex; }
.cl-footer { padding: var(--space-5) var(--space-8); border-top: 1px solid var(--line); }
/* The vendor marks a working button .cl-loading too; these draw only the card's own wait. */
.cl-loading:not(.cl-button) { display: flex; justify-content: center; padding: var(--space-9) 0; color: var(--quiet); }
.cl-loading:not(.cl-button) .cl-spinner { width: var(--space-8); height: var(--space-8); }
.cl-spinner { flex: none; box-sizing: border-box; width: var(--space-6); height: var(--space-6); border: 2px solid currentColor; border-bottom-color: transparent; border-left-color: transparent; border-radius: var(--radius-round); animation: cl-spin 400ms linear infinite; }
@keyframes cl-spin { to { transform: rotate(1turn); } }
.cl-formFieldCheckboxInput { flex: none; width: var(--space-6); height: var(--space-6); margin: var(--space-1) 0 0; }
.cl-formFieldCheckboxLabel { font-size: var(--size-small); line-height: var(--leading-small); }
@media (prefers-reduced-motion: reduce) { .cl-spinner { animation: none; } }