/* Account recovery: the signed-out reset and verification pages, the
   "forgot your password" form on the sign-in dialog, and the operator's
   reset-link control in Settings.

   Every colour is a custom property from :root in app.css. A literal hex here
   would look right in one theme and wrong in the other, because the dark
   palette redefines those properties and cannot redefine a hex.

   Layout mirrors .cw-accept in connect.css: these pages sit in the same
   .landing container and should read as one family with the invitation page
   rather than as a different product. */

/* ---------- signed-out pages ---------- */

.cw-auth {
  width: min(520px, 100%);
  margin: 48px auto;
}

.cw-auth h1 { margin: 4px 0 8px; }

.cw-auth-form { margin-top: 20px; }

.cw-auth-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* The server's own sentence about what happened. Given a settled place on the
   page so it never lands where the reader is about to click. */
.cw-auth-result {
  margin-top: 12px;
  min-height: 16px;
  color: var(--ink-2);
}

.cw-auth-result:empty { margin-top: 0; }

/* ---------- sign-in dialog ---------- */

/* Separated from the sign-in button above it, so "Forgot your password?" does
   not read as part of the primary action. */
.cw-forgot { margin-top: 14px; }

.cw-auth-reset h2 {
  font-size: 19px;
  margin: 0 0 4px;
}

/* Inside the dialog the request form is the whole panel, so it needs no
   width of its own - only the spacing the sibling forms already have. */
.cw-auth-reset .cw-auth-form { margin-top: 16px; }

.cw-auth-reset .cw-auth-request > .muted { font-size: 12px; }

/* ---------- settings: verification and operator links ---------- */

/* The row of controls under the verification status pill. */
.cw-verify-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* A minted link, shown in place under the member it belongs to. Bordered
   rather than tinted, because a reset link is neither a success nor a warning
   - it is a credential waiting to be handed over. */
.cw-issued-link {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.cw-issued-link .hint { margin-top: 8px; }

/* Long tokens must wrap rather than widen the members table. */
.cw-issued-link code {
  display: block;
  overflow-wrap: anywhere;
}

.cw-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 620px) {
  .cw-auth { margin: 24px auto; }
}