/* ============================================================
   Account — login / signup
   Loaded only on the logged-out my-account screen
   (init/account-auth.php), so nothing here can reach the
   account dashboard, cart or checkout.

   Tokens, radii and the focus ring all come from theme.css —
   this file adds a layout, not a second design system.
   ============================================================ */

/* ── Escape the WooCommerce page shell ───────────────────────── */
/* .cee-woocommerce-inner pads 40px 32px 80px (theme.css) and .cee-container--wide
   caps the width. Both are right for a shop page and wrong for an auth screen,
   which wants the pitch panel bleeding to the viewport edge. Undoing them here
   is scoped to .cee-auth-screen, the body class added only when a signed-out
   visitor is on my-account. */
.cee-auth-screen .cee-woocommerce-inner {
  padding: 0;
  max-width: none;
  width: 100%;
}

/* With the wrapper padding gone the breadcrumb would sit flush against the
   viewport edge — and "Home / My account" is navigation a visitor who came here
   to sign in does not need. */
.cee-auth-screen .woocommerce-breadcrumb {
  display: none;
}

/* theme.css's dashboard grid on .woocommerce-account .woocommerce is scoped
   with :not(.cee-auth-screen), so it does not apply here. What it does not
   cover is core's clearfix, which on a block container leaves stray table rows
   above and below the layout. */
.cee-auth-screen .woocommerce::before,
.cee-auth-screen .woocommerce::after {
  display: none;
}

/* ── Shell ───────────────────────────────────────────────────── */
.cee-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  /* Fills the viewport below the header without a magic number: the header is
     sticky and its height varies with the promo bar, so cap rather than fix. */
  min-height: 78vh;
}
.cee-auth--login-only {
  grid-template-columns: minmax(0, 1fr);
}
.cee-auth--login-only .cee-auth__pitch {
  display: none;
}

/* ── Form column ─────────────────────────────────────────────── */
.cee-auth__forms {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--bg);
  padding: 56px 32px 72px;
}
.cee-auth__forms-inner {
  width: 100%;
  max-width: 440px;
}

/* Notices are printed here by the template rather than above the layout. */
.cee-auth__forms-inner .woocommerce-notices-wrapper:empty {
  display: none;
}
.cee-auth__forms-inner .woocommerce-error,
.cee-auth__forms-inner .woocommerce-message,
.cee-auth__forms-inner .woocommerce-info {
  margin: 0 0 24px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.cee-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 32px;
}
.cee-auth__tab {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.cee-auth__tab:hover {
  color: var(--ink);
}
.cee-auth__tab.is-active {
  background: var(--ink);
  color: #fff;
}
.cee-auth__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Panels ──────────────────────────────────────────────────── */
/* No-JS default: both panels visible and submittable, stacked, each under its
   own heading. account-auth.js adds .cee-auth--js, which is what turns them
   into real tab panels. Nothing here is gated on JavaScript. */
.cee-auth__panel + .cee-auth__panel {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.cee-auth--js .cee-auth__panel {
  display: none;
}
.cee-auth--js .cee-auth__panel.is-active {
  display: block;
}
.cee-auth--js .cee-auth__panel + .cee-auth__panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* The tab strip is only meaningful once JS can switch between panels. */
.cee-auth__tabs {
  display: none;
}
.cee-auth--js .cee-auth__tabs {
  display: grid;
}

.cee-auth__heading {
  font-size: clamp(28px, 3vw, 36px);
  margin: 0 0 8px;
}
.cee-auth__sub {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 28px;
}
.cee-auth__note {
  font-size: 13.5px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 20px;
}

/* WooCommerce core wraps .login and .register in a bordered, rounded box of its
   own (woocommerce.css). Inside this layout that reads as a stray card floating
   in the middle of the column — the panel already frames the form. */
.cee-auth__forms form.cee-auth__form {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* ── Fields ──────────────────────────────────────────────────── */
/* The template puts .cee-field on core's .form-row wrappers so the account
   field styling in theme.css applies. These rules cover what core's own
   layout CSS would otherwise impose (floats, 48% widths). */
.cee-auth__form .form-row {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0 0 18px;
}
.cee-auth__form .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.cee-auth__form input.input-text {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.cee-auth__form input.input-text:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 16, 12, 0.1);
}
.cee-auth__form .required {
  color: var(--accent-ink);
  text-decoration: none;
  border: 0;
}

/* ── Account type / integration pickers ──────────────────────── */
.cee-auth__type {
  margin-bottom: 24px;
}
.cee-auth__type.cee-choice-grid {
  grid-template-columns: 1fr 1fr;
}
.cee-auth__integrations.cee-choice-grid {
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
}
/* Square tiles again, so a fixed box rather than a wordmark's height + max-width. */
.cee-auth__int-logo {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  margin-bottom: 4px;
  opacity: 0.9;
}
.cee-choice-card input:checked + .cee-choice-card__face .cee-auth__int-logo {
  opacity: 1;
}


/* ── Form meta row ───────────────────────────────────────────── */
.cee-auth__form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}
.cee-auth__form-meta .cee-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.cee-auth__form-meta .cee-check input {
  margin: 0;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.cee-auth__form-meta .lost_password {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.cee-auth__form-meta .lost_password:hover {
  color: var(--accent-ink);
}

/* ── Submit ──────────────────────────────────────────────────── */
.cee-auth__submit-row {
  margin: 4px 0 0;
}
/* Both selectors carry .woocommerce button.button from theme.css, which is
   more specific than .cee-btn--primary and would otherwise paint the primary
   action black — the same ink as a secondary button. */
.cee-auth .cee-auth__submit-row button.cee-btn--primary {
  width: 100%;
  justify-content: center;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  padding: 17px 26px;
  font-size: 15px;
}
.cee-auth .cee-auth__submit-row button.cee-btn--primary:hover {
  background: var(--accent);
  opacity: 0.88;
}

/* ── Switch link ─────────────────────────────────────────────── */
.cee-auth__switch {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--ink-2);
  text-align: center;
}
.cee-auth__switch-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: underline;
}
.cee-auth__switch-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Pitch panel ─────────────────────────────────────────────── */
.cee-auth__pitch {
  background: var(--dark-bg);
  color: #fff;
  padding: 56px 48px 72px;
  display: flex;
  align-items: flex-start;
}
.cee-auth__pitch-block {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  /* The signup form is a good deal taller than the pitch, so a statically
     placed panel scrolls out of view exactly when the visitor is deciding
     whether to finish. Sticking it below the header keeps the reasons on
     screen for the whole form. The offset clears the promo bar + nav. */
  position: sticky;
  top: 104px;
}
/* Both audiences ship in the markup; JS shows the one matching the selected
   account type. Without JS the brand block shows and the shopper block is
   simply the second thing on the page — no content is lost. */
.cee-auth--js .cee-auth__pitch-block {
  display: none;
}
.cee-auth--js .cee-auth__pitch-block.is-active {
  display: block;
}
.cee-auth__pitch-block + .cee-auth__pitch-block {
  margin-top: 56px;
}
.cee-auth--js .cee-auth__pitch-block + .cee-auth__pitch-block {
  margin-top: 0;
}

.cee-auth__pitch .cee-eyebrow {
  color: rgba(255, 255, 255, 0.5);
}
.cee-auth__pitch-heading {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 34px);
  margin: 0 0 14px;
}
.cee-auth__pitch-body {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.cee-auth__pitch-body strong {
  color: #fff;
}

/* ── Feature list ────────────────────────────────────────────── */
.cee-auth__features {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 18px;
}
.cee-auth__feature {
  display: block;
  padding-left: 26px;
  position: relative;
}
/* A drawn dot rather than a list marker or an icon font: it inherits the brand
   red and needs no extra request. */
.cee-auth__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 16, 12, 0.18);
}
.cee-auth__feature-title {
  display: block;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.cee-auth__feature-body {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Integration logos ───────────────────────────────────────── */
.cee-auth__logos {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* These are square icon tiles with their own cream background, not wordmarks —
   the same 64×64 artwork the homepage renders at 48px. They already carry
   enough contrast to sit on the dark panel, so no tinting or inverting: either
   would flatten the tile and its art into one solid block. */
.cee-auth__logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* ── Stats ───────────────────────────────────────────────────── */
.cee-auth__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 26px;
}
.cee-auth__stat-num {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.cee-auth__stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cee-auth__pitch {
    padding: 48px 36px 56px;
  }
  .cee-auth__forms {
    padding: 48px 28px 56px;
  }
}

@media (max-width: 900px) {
  /* Form first: someone who followed "Start selling — free" came to sign up,
     not to read. The pitch continues below the fold. */
  .cee-auth {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .cee-auth__pitch {
    padding: 48px 24px 60px;
  }
  .cee-auth__pitch-block {
    max-width: none;
    /* Stacked, the pitch is its own section of the page — sticking it would
       pin it over the footer. */
    position: static;
  }
}

@media (max-width: 560px) {
  .cee-auth__forms {
    padding: 32px 20px 48px;
  }
  .cee-auth__type.cee-choice-grid,
  .cee-auth__integrations.cee-choice-grid {
    grid-template-columns: 1fr;
  }
  .cee-auth__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cee-auth__form-meta {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cee-auth__tab,
  .cee-auth__logo-mark {
    transition: none;
  }
}