/* Security settings — real password and passkey workflows only. */

:root {
  --sec-accent: var(--color-cosmos-accent);
  --sec-text: var(--dash-text, var(--color-text-primary));
  --sec-muted: var(--dash-text-muted, var(--color-text-secondary));
}

.sec-page .sec-btn--primary { background: var(--sec-accent); }

.sec-content {
  flex: 1;
  min-width: 0;
  padding: var(--dash-content-y, 32px) var(--dash-page-x, 32px);
  padding-left: calc(var(--dash-page-x, 32px) + var(--dash-mobile-nav-gutter, 0px));
  padding-bottom: calc(var(--dash-content-y, 32px) + var(--dash-content-pad-bottom, 0px));
  container: sec-content / inline-size;
}

.sec-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.sec-main {
  display: grid;
  min-width: 0;
  gap: 24px;
}

.sec-card {
  border: 0;
  border-radius: 20px;
  background: var(--dash-card);
  box-shadow: var(--dash-shadow);
}

.sec-card[hidden],
.sec-btn[hidden] {
  display: none;
}

.sec-card__head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.sec-card__body { min-width: 0; }

.sec-card__title {
  margin: 0;
  color: var(--sec-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.sec-card__copy,
.sec-status {
  margin: 6px 0 0;
  color: var(--sec-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sec-card__copy { max-width: 62ch; }

.sec-verification {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--sec-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sec-verification[hidden] { display: none; }
.sec-verification .sec-link-action { min-height: 24px; color: var(--sec-text); }

.sec-card__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.sec-status[data-tone='success'] { color: var(--sec-muted); }
.sec-status[data-tone='warning'],
.sec-form-error[data-tone='warning'] { color: var(--sec-muted); }
.sec-status[data-tone='error'],
.sec-form-error[data-tone='error'] { color: var(--color-error, #ef6262); }

.sec-passkeys-list {
  display: grid;
  margin: -4px 24px 24px;
  color: var(--sec-muted);
  font-size: 14px;
  line-height: 1.5;
}

.sec-card > #securityPasskeysStatus { margin: -12px 24px 24px; }

.sec-empty,
.sec-inline-error,
.sec-inline-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px 0;
}

.sec-inline-error,
.sec-inline-notice { padding-inline: 16px; border-radius: 14px; background: var(--dash-surface-hover); }

.sec-empty__icon,
.sec-passkey-row__icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 11px;
  background: var(--color-well-hover);
  color: var(--sec-muted);
}

.sec-empty__icon svg,
.sec-passkey-row__icon svg { width: 18px; height: 18px; }

.sec-empty div,
.sec-inline-error,
.sec-inline-notice,
.sec-passkey-row__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sec-empty strong,
.sec-inline-error strong,
.sec-inline-notice strong,
.sec-passkey-row__copy strong {
  color: var(--sec-text);
  font-weight: 500;
}

.sec-empty span,
.sec-inline-error span,
.sec-inline-notice span,
.sec-passkey-row__copy span { color: var(--sec-muted); }

.sec-inline-error,
.sec-inline-notice { align-items: start; }
.sec-inline-error .sec-link-action,
.sec-inline-notice .sec-link-action { justify-self: start; margin-top: 4px; }

.sec-passkey-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 0;
}

.sec-passkey-row + .sec-passkey-row { border-top: 1px solid var(--dash-border); }

.sec-passkey-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  color: var(--sec-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease-out, opacity 120ms ease-out, transform 120ms ease-out;
}

.sec-btn:active:not(:disabled) { transform: scale(var(--button-press-scale, 0.96)); }
.sec-btn:disabled { cursor: wait; opacity: 0.58; }
.sec-btn--primary { color: var(--color-button-primary-text, #fff); }
.sec-btn--secondary { background: var(--dash-surface-hover); }
.sec-btn--secondary:hover:not(:disabled) { background: var(--color-well-hover); }
.sec-btn--danger {
  background: color-mix(in srgb, var(--color-error, #ef6262) 12%, transparent);
  color: var(--color-error, #ef6262);
}
.sec-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-error, #ef6262) 17%, transparent);
}
.sec-btn--sm { min-height: 36px; padding-inline: 12px; border-radius: 11px; font-size: 13px; }

.sec-link-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sec-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.sec-link-action:hover { color: var(--sec-text); }
.sec-link-action[hidden] { display: none; }

.sec-form-error {
  margin: -4px 0 0;
  color: var(--color-error, #ef6262);
  font-size: 13px;
  line-height: 1.45;
}

.sec-field-hint {
  margin: 0;
  color: var(--sec-muted);
  font-size: 13px;
  line-height: 1.45;
}

.sec-confirm-name {
  margin: 0;
  padding: 16px;
  border-radius: 14px;
  background: var(--dash-surface-hover);
  color: var(--sec-text);
  font-size: 15px;
  font-weight: 500;
}

.sec-drawer input[aria-invalid='true'] {
  box-shadow: 0 0 0 2px var(--color-error, #ef6262);
}

.sec-page dialog.nv-dialog .nv-dialog__footer .sec-btn { min-width: 116px; }

@container sec-content (max-width: 620px) {
  .sec-card__head-row { flex-direction: column; align-items: stretch; }
  .sec-card__actions { width: 100%; }
  .sec-card__actions .sec-btn { flex: 1; }
}

@container sec-content (max-width: 440px) {
  .sec-card__actions { flex-direction: column-reverse; }
  .sec-verification { align-items: flex-start; flex-direction: column; gap: 2px; }
  .sec-passkey-row { grid-template-columns: auto minmax(0, 1fr); }
  .sec-passkey-row__actions { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-btn { transition: none; }
}