/*
 * totp-generator.css — per-tool styles for the 2FA / TOTP generator.
 * Tokens only; no inline styles (CSP: style-src 'self').
 */

/* Privacy banner sits above the secret field. */
.totp-privacy { margin-bottom: var(--space-4); }

/* Option groups (code settings, otpauth fields). */
.totp-options { margin-top: var(--space-5); }
.totp-options .field-label-static { margin-bottom: var(--space-2); }

.totp-grid { display: grid; gap: var(--space-3); }
.totp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.totp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) {
  .totp-grid-3, .totp-grid-2 { grid-template-columns: 1fr; }
}

.totp-opt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.totp-opt > label {
  font: 500 13px var(--font-sans);
  color: var(--text-secondary);
}

/* ---- Current code + countdown ring ---- */
.totp-code-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.totp-ring { position: relative; width: 76px; height: 76px; flex: none; }
.totp-ring-svg { width: 100%; height: 100%; display: block; }
.totp-ring-bg { fill: none; stroke: var(--neutral-200); stroke-width: 3.5; }
.totp-ring-fg {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.totp-ring-fg.is-low { stroke: var(--warning-500); }
/* Applied for one frame at rollover so the ring resets without a reverse sweep. */
.totp-ring-fg--snap { transition: none; }
.totp-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 18px var(--font-mono);
  color: var(--text-primary);
}

.totp-code-main { min-width: 0; }
.totp-code {
  font: 700 40px/1.1 var(--font-mono);
  letter-spacing: 4px;
  color: var(--text-primary);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.totp-code.is-empty { color: var(--neutral-300); }

.totp-valid { font-size: 13px; color: var(--text-muted); margin-top: var(--space-2); }

.totp-next { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.totp-next-code {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 4px;
}