/* ==========================================================================
   AUTH — sign in / sign up
   Two different surfaces share the .auth-field / .auth-form primitives
   below:
     1. Inline forms embedded in a normal themed page (settings.html's
        password-change form) — light/dark aware, unchanged from before.
     2. The full-page split card (login.html/signup.html) and the popup
        modal (auth-modal.js) — a fixed-dark card that looks the same
        regardless of site theme, styled separately under .auth-split /
        .auth-modal below so it never inherits the page's light/dark
        tokens.
   ========================================================================== */

/* ---- Shared primitives (settings.html's inline forms + used as a base
   by the split-card/modal overrides below) --------------------------- */
.auth-form{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.auth-field{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.auth-field label{
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-text);
}
.auth-field input{
  appearance: none;
  width: 100%;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-text);
  padding: 0.85rem 1.1rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.auth-field input::placeholder{ color: var(--ink-mute); }
.auth-field input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.auth-field--password{ position: relative; }
.auth-field--password input{ padding-right: 2.9rem; }
.auth-field__toggle{
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.auth-field__toggle:hover{
  color: var(--ink-text);
  background: var(--bg-raised);
}
.auth-field__toggle svg{ width: 18px; height: 18px; }

.auth-form__error{
  font-size: 0.8125rem;
  font-weight: 600;
  color: #d9534f;
  background: color-mix(in srgb, #d9534f 10%, transparent);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}
.auth-form__note{
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: var(--bg-raised);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
}

.auth-form__submit{
  justify-content: center;
  width: 100%;
  padding-block: 0.85rem;
  margin-top: 0.25rem;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   SPLIT-CARD AUTH PAGE — login.html / signup.html
   Full-page, header-free: a fixed-dark card floating on a muted backdrop,
   image panel on the left (logo, "Back to website", tagline, dots),
   form panel on the right. Reached only from the Home page's "Sign in" —
   every other entry point uses the popup modal further down, which
   reuses this same visual language at a smaller size.
   ========================================================================== */
.auth-page{
  min-height: 100vh;
  background: #86859433;
  background: linear-gradient(160deg, #7d7c8c 0%, #63626f 100%);
}
[data-theme="dark"] .auth-page{
  background: linear-gradient(160deg, #201f27 0%, #131217 100%);
}
.auth-page__main{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.auth-split{
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #1a1a22;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
}
@media (max-width: 780px){
  .auth-split{ grid-template-columns: 1fr; max-width: 460px; }
}

/* ---- Image panel ---------------------------------------------------- */
.auth-split__media{
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem;
  /* Same grid-column shrink issue as .auth-split__form's own comment
     below — kept consistent across both columns of .auth-split. */
  min-width: 0;
}
@media (max-width: 780px){
  .auth-split__media{ min-height: 260px; }
}
.auth-split__media-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.auth-split__media-wash{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,15,40,0.35) 0%, rgba(15,12,28,0.15) 40%, rgba(10,8,20,0.75) 100%);
}
.auth-split__media-top,
.auth-split__media-bottom{
  position: relative;
  z-index: 2;
}
.auth-split__media-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.auth-split__logo{
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}
.auth-split__logo-mark{
  width: auto;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.auth-split__logo span{ color: var(--accent); }
.auth-split__back{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease);
  white-space: nowrap;
}
.auth-split__back:hover{ background: rgba(255,255,255,0.24); }
.auth-split__back svg{ width: 13px; height: 13px; }

.auth-split__tagline{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1rem;
}
.auth-split__dots{ display: flex; gap: 6px; }
.auth-split__dots span{
  width: 18px; height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.35);
}
.auth-split__dots span.is-active{ background: #fff; }

/* ---- Form panel ------------------------------------------------------ */
.auth-split__form{
  padding: clamp(2rem, 4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  /* .auth-split__form is a grid column inside .auth-split (1fr on mobile,
     780px breakpoint above) — grid items default to min-width: auto, so
     a long unbroken content width (the checkbox label text below, or the
     "Sign in with Google" button) can hold this column wider than its
     1fr track instead of shrinking to fit. html{ overflow-x: hidden }
     silently clips the resulting overflow rather than showing a scrollbar,
     which doesn't restore centering — it just hides the excess on one
     side, making all the *visible* content read as shifted off-center.
     Same root cause/fix as .post-card and .skel-post-card elsewhere in
     this project; min-width: 0 lets the column actually shrink to its
     track like a normal 1fr is supposed to. */
  min-width: 0;
}
.auth-split__title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
}
.auth-split__switch{
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
.auth-split__switch a{
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.auth-split__switch a:hover{ text-decoration: underline; }
/* The modal's equivalent switch control (auth-modal.js) uses a <button>
   instead of an <a> — it swaps panels in place via JS rather than
   navigating to a different page, so it isn't a real link — but should
   look identical to the full-page version's link above. */
.auth-split__switch button{
  color: var(--accent);
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.auth-split__switch button:hover{ text-decoration: underline; }

.auth-split__form .auth-form{ margin-top: 1.6rem; gap: 0.85rem; }
.auth-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 480px){
  .auth-field-row{ grid-template-columns: 1fr; }
}

/* Inputs on the dark card need their own palette — the shared .auth-field
   input rule above is tuned for a themed light/dark page background, not
   a fixed-dark card, so every visual property is restated here rather
   than trying to bend the light/dark tokens to fit a surface that never
   changes with the theme toggle. */
.auth-split__form .auth-field input{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}
.auth-split__form .auth-field input::placeholder{ color: rgba(255,255,255,0.4); }
.auth-split__form .auth-field input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.auth-split__form .auth-field__toggle{ color: rgba(255,255,255,0.5); }
.auth-split__form .auth-field__toggle:hover{
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.auth-split__form .auth-form__error{
  color: #ff8a80;
  background: rgba(255,90,70,0.12);
}
.auth-split__form .auth-form__note{
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
}

.auth-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  /* Long label text ("Send me tips, product news, and resources to help
     grow my business") is a plain text node in this flex row — without
     min-width: 0 it can hold the row (and everything above it in the
     .auth-split__form column) wider than the available space instead of
     wrapping, contributing to the mis-centering described on
     .auth-split__form above. align-items switched from center to
     flex-start so the checkbox box stays aligned to the first line once
     the label text wraps onto two lines on narrow screens, rather than
     centering against the now-taller wrapped block. */
  min-width: 0;
}
.auth-checkbox input{
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.auth-checkbox__box{
  flex-shrink: 0;
  width: 19px; height: 19px;
  /* Keeps the box visually centered against the label's first line now
     that .auth-checkbox uses align-items: flex-start instead of center
     (see that rule's comment) — without this the box sits flush with the
     text's cap-height top instead of its optical center. */
  margin-top: 0.1rem;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.auth-checkbox__box svg{ width: 12px; height: 12px; }
.auth-checkbox input:checked + .auth-checkbox__box{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.auth-checkbox input:focus-visible + .auth-checkbox__box{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.auth-checkbox a{ color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.auth-split__form .auth-form__submit,
.auth-modal .auth-form__submit{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.auth-split__form .auth-form__submit:hover,
.auth-modal .auth-form__submit:hover{
  filter: brightness(1.08);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

.auth-split__divider{
  position: relative;
  text-align: center;
  margin: 1.5rem 0 1.25rem;
}
.auth-split__divider::before{
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.14);
}
.auth-split__divider span{
  position: relative;
  background: #1a1a22;
  padding: 0 0.75rem;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
}

.auth-social{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.auth-social:hover{
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
}
.auth-social + .auth-social{ margin-top: 0.6rem; }

/* ==========================================================================
   LOGIN MODAL — popup used on every page except Home
   This is the exact .auth-split design from login.html/signup.html
   (image panel + form panel), just wrapped in a centered overlay instead
   of taking over the whole page. No separate visual language to
   maintain — .auth-modal only handles overlay positioning/sizing, and
   the nested .auth-split renders with the same rules as the full pages.
   ========================================================================== */
.auth-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10,10,14,0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.auth-modal-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.auth-modal{
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}
.auth-modal-overlay.is-open .auth-modal{ transform: translateY(0) scale(1); }

/* The .auth-split inside the modal fills the card exactly like it fills
   .auth-page__main on the full pages — no width/margin of its own. */
.auth-modal .auth-split{
  max-width: none;
  box-shadow: none;
}
@media (max-width: 780px){
  .auth-modal .auth-split{ max-width: none; }
}

/* The modal keeps both the sign-in and sign-up .auth-split panels in the
   DOM at once and toggles which one is visible via the [hidden]
   attribute. Same [hidden]-vs-class-display specificity bug fixed
   elsewhere in this project (.product-grid, .articles-grid, etc.):
   .auth-split{ display:grid } is a class selector, so at equal
   specificity it beats the browser's UA [hidden]{ display:none } rule
   and the "hidden" panel would still render as a grid. This selector
   is more specific than the base rule, so it wins and actually hides it. */
.auth-modal .auth-split[hidden]{
  display: none;
}

.auth-modal__close{
  /* Positioned relative to .auth-modal-overlay (see ensureModal() in
     auth-modal.js, where this button is now a sibling of .auth-modal
     rather than nested inside it) — not .auth-modal itself, which has
     overflow-y: auto (it's the tall stacked .auth-split content
     exceeding max-height: 90vh on mobile). A close button positioned
     absolute *inside* a scrolling container scrolls away along with the
     rest of the form as soon as the person scrolls down toward "Create
     account" — its drawn position stops matching its actual hit target,
     so a tap on the visible "×" lands on whatever's now underneath it
     instead. Anchored to the non-scrolling overlay instead, it stays
     pinned to the modal card's top-right corner regardless of how far
     the form inside has scrolled. */
  position: absolute;
  top: calc(1.5rem + 14px); right: calc(1.5rem + 14px);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  z-index: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.auth-modal__close:hover{ background: rgba(255,255,255,0.15); color: #fff; }
.auth-modal__close svg{ width: 16px; height: 16px; }

body.auth-modal-open{ overflow: hidden; }