/* The sign-in pages' own sheet: the smoke layers behind the auth cards
   and the floating fields on them. Loaded by the auth pages only, after
   css/theme.css, so the shared sheet stays light for every other page. */
:root {
  --cm-smoke-rgb: 87, 83, 78;
  --cm-smoke-a: 0.22;
}
:root:not([data-theme="light"]) {
  --cm-smoke-rgb: 160, 157, 166;
  --cm-smoke-a: 0.16;
}
:root[data-theme="dark"] {
  --cm-smoke-rgb: 160, 157, 166;
  --cm-smoke-a: 0.16;
}
/* The sign-in smoke: a WebGL canvas (js/smoke.js) drawing slow graphite
   bands behind the auth cards, a veil that softens it, and the one ember
   breath the quiet pages keep. The colour tokens sit with each theme. */
.cm-smoke { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cm-smoke-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.cm-smoke-ember {
  position: fixed; z-index: 0; pointer-events: none;
  width: 560px; height: 560px; left: -180px; top: 42%; border-radius: 50%;
  background: radial-gradient(circle, var(--cm-accent-tint-strong), transparent 62%);
  filter: blur(40px);
}

/* Floating fields, for the sign-in cards: the input draws one underline,
   the label rests in the field and rises when the field has focus or
   words (the input before the label, with placeholder=" "). The pinned
   form keeps the label up for fields that always show a prefix or hint. */
.cm-float { position: relative; padding-top: 16px; }
.cm-float .form-control {
  height: 44px; border: 0; border-bottom: 2px solid var(--cm-border-input); border-radius: 0;
  background: transparent; padding: 16px 2px 4px; transition: border-color .15s ease, box-shadow .15s ease;
}
.cm-float .form-control:focus { outline: none; border-bottom-color: var(--cm-accent); box-shadow: 0 1px 0 0 var(--cm-accent); }
.cm-float .form-control.is-invalid { border-bottom-color: var(--cm-danger-ink); background: transparent; box-shadow: none; }
.cm-float .form-control.is-valid { border-bottom-color: rgba(77, 124, 15, 0.5); background: transparent; }
.cm-float > .cm-label {
  position: absolute; left: 2px; top: 28px; margin: 0; pointer-events: none;
  font-size: 14px; font-weight: 400; color: var(--cm-muted-soft);
  transform-origin: left top; transition: transform .18s ease, color .18s ease;
}
.cm-float > .form-control:focus ~ .cm-label,
.cm-float > .form-control:not(:placeholder-shown) ~ .cm-label,
.cm-float > .cm-handle-wrap:focus-within ~ .cm-label,
.cm-float > .cm-label.is-pinned {
  transform: translateY(-26px) scale(0.86); font-weight: 500; color: var(--cm-ink);
}
.cm-float > .form-control:focus ~ .cm-label { color: var(--cm-accent-deep); }
.cm-float > .cm-label.is-error { color: var(--cm-danger-ink); }
.cm-float .cm-handle-wrap { display: flex; align-items: center; }
.cm-float .cm-handle-wrap .form-control { flex: 1; }
.cm-float .cm-handle-wrap .cm-at { position: static; transform: none; padding: 12px 4px 0 0; color: var(--cm-muted-soft); }

/* The arrow on a primary sign-in button leans forward on hover. */
.cm-btn-arrow { display: inline-flex; margin-left: 8px; transition: transform .2s ease; }
.btn-cm-primary:hover .cm-btn-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .cm-btn-arrow { transition: none; }
  .btn-cm-primary:hover .cm-btn-arrow { transform: none; }
}