/* Auth pages — supplements sonn-core.css (reuses its tokens & components).
   Only what the login/register/verify screens need on top of the core. */

.auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth .brand {
  margin-bottom: 30px;
  font-size: 22px;
}

.auth .card {
  width: 100%;
  max-width: 440px;
  padding: 38px 36px;
}

.auth-head {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.auth-sub {
  color: var(--soft);
  font-size: 15px;
  margin: 0 0 4px;
}

/* Fix: in the two-column row (First name / Surname) the inputs kept their
   intrinsic ~20-char width while the grid cells (min-width:auto) couldn't
   shrink, so the right input overflowed the modal. Force inputs to fit their
   column and let the grid tracks shrink. */
.modal-form input[type="email"],
.modal-form input[type="text"],
.modal-form input[type="password"] { width: 100%; }
.modal-form .mf-2 { min-width: 0; }
.modal-form .mf-2 > label { min-width: 0; }

/* Password fields aren't covered by core's .modal-form rule — add parity. */
.modal-form input[type="password"] {
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}
.modal-form input[type="password"]::placeholder { color: var(--faint); }
.modal-form input[type="password"]:focus { outline: none; border-color: var(--soft); }

.auth-alt {
  margin-top: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.auth-alt a { color: var(--soft); }

.auth-msg {
  display: none;
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.auth-msg.show { display: block; }
.auth-msg.error { color: var(--red); border: 1px solid rgba(229, 132, 120, 0.4); background: rgba(229, 132, 120, 0.08); }
.auth-msg.ok { color: var(--green); border: 1px solid rgba(116, 224, 160, 0.4); background: rgba(116, 224, 160, 0.08); }
.auth-msg.info { color: var(--muted); border: 1px solid var(--line); background: var(--panel-2); }
/* When the error sits between fields in a modal form, the form's own 14px gap
   already spaces it — drop the extra top margin so it hugs the field above. */
.modal-form .auth-msg { margin-top: 0; }

/* Dashboard reuses the account page chrome; just a couple of helpers. */
.trial-bar {
  margin-top: 28px;
  margin-bottom: 4px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.trial-bar.trialing { border-color: rgba(116, 224, 160, 0.35); color: var(--soft); }
.trial-bar.expired { border-color: rgba(229, 132, 120, 0.45); color: var(--red); background: rgba(229, 132, 120, 0.06); }
/* Positive confirmation (e.g. just reactivated) — light green, welcoming. */
.trial-bar.ok { border-color: rgba(116, 224, 160, 0.45); color: var(--green); background: rgba(116, 224, 160, 0.07); }
.badge-on.expired { color: var(--red); border-color: rgba(229, 132, 120, 0.4); }

/* Account rows: keep the micro-label on its own line, then put the main text and
   the action button on one flex line so the button aligns with the text. */
.row-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

/* Delete account → same look as the cream "Subscribe →" primary button, but red.
   Mirror .btn-primary's geometry (padding/font) with a solid red fill. */
.btn-danger {
  background: #e23b35;
  color: #ffffff;
  border: 1px solid #e23b35;
  padding: 11px 20px;
  font-size: 14.5px;
}
.btn-danger:hover {
  background: #cf322c;
  border-color: #cf322c;
}
.btn-danger .ar { color: #ffffff; }

/* Confirm dialog (deactivate / unsubscribe / delete) */
.confirm-dialog { max-width: 460px; }
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}
.confirm-actions .btn { min-width: 120px; }
.modal-badge.danger { color: #fff; background: #e23b35; }
@media (max-width: 460px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}

/* ---- Global auth chrome (auth-widget.js) ---- */

/* Top-right: "Log in" sits before "Install Sonn" (desktop). */
.topcta-wrap {
  position: fixed;
  top: 24px;
  right: 34px;
  z-index: 50;
  display: flex;
  gap: 12px;
  align-items: center;
}
@media (max-width: 1080px) {
  .topcta-wrap { display: none; }
}

/* Anchor navigation (rail nav, cross-page #hash) lands a section's top — and
   its divider border — below the fixed top-right button group, instead of
   under it. Lenis uses an explicit offset; this covers the native/reduced-motion
   path. Keep in sync with the lenis scrollTo offset in sonn-core.js. */
html { scroll-padding-top: 96px; }

/* The fixed top-right group sits over scrolling content. Ghost buttons are
   transparent by default, so a section divider line scrolling behind them
   bleeds through (the solid "Install Sonn" already blocks it). Give the group's
   ghost buttons an opaque fill so they always read clean, like the primary one. */
.topcta .btn-ghost,
.topcta-wrap .btn-ghost {
  background: var(--bg);
}
.topcta .btn-ghost:hover,
.topcta-wrap .btn-ghost:hover {
  background: var(--panel);
  border-color: var(--soft);
}
/* Mobile: "Log in" before the railcta in the rail row; hidden on desktop. */
@media (min-width: 1081px) {
  .railcta-login { display: none; }
}

/* Logged-in rail: trial countdown / subscribe, above the log-out footer. */
.rail-auth { margin-top: 18px; flex-shrink: 0; }
.rail-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
}
.rail-count .rc-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.rail-count .rc-lab {
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rail-count.active {
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--green);
  letter-spacing: 0.04em;
}
.rail-count.active .rc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}
.rail-sub { width: 100%; }

.rail-logout {
  margin-top: 16px;
  text-decoration: none;
}
.rail-logout:hover { text-decoration: none; }

/* ---- Mobile (rail collapses to a top bar) ---- */
@media (max-width: 1080px) {
  /* Brand left; auth controls grouped on the right; drop the trial countdown
     so the bar isn't crammed. */
  .rail { gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
  .rail .brand { margin-right: auto; }
  .rail-auth { display: none; }
  .rail-logout { margin-top: 0; }
  .railcta-login,
  .rail-logout { padding: 9px 15px; font-size: 13px; }
}

/* On narrow phones, stack the label-row's text above its button instead of
   squeezing them side by side. */
@media (max-width: 560px) {
  .row-line { flex-direction: column; align-items: flex-start; gap: 12px; }
}