/**
 * Sign-in and account-creation screens for the gated storefront.
 *
 * Loaded only for logged-out auth screens (see inc/auth-gate.php), and declared with home.css as a
 * dependency so it always resolves later in the cascade.
 *
 * The page structure is the ad landing page's (assets/ad-landing.css): a dark gradient canvas, a
 * flex column that pins a thin footer to the bottom of the viewport, and one centred stack between
 * them. That page fits header, headline, action, proof and footer into exactly one viewport at every
 * size, and these screens are the same kind of page — one action, no navigation.
 *
 * The form itself sits in a white card on that canvas, so the page runs two palettes:
 *
 *   --ts-authg-on-dark-*   header, footer and proof row, which sit directly on the gradient
 *   --ts-authg-ink / -rule / -surface   everything inside the card, which is the original light skin
 *
 * Keeping them as separate token sets rather than one inverted set is what stops the two contexts
 * bleeding into each other: a rule that picks the wrong prefix is visibly wrong immediately, rather
 * than only at certain contrast ratios.
 *
 * Four structural notes, because each is easy to undo by accident:
 *
 * 1. Every selector starts `body.ts-authgate`, which exists only to carry one class of specificity
 *    over the equivalent home.css rule. home.css dresses these screens through four-class selectors
 *    and a number of !important declarations; without that extra class the rules below tie at best.
 *    The same applies to the inline critical CSS in inc/home.php, which paints
 *    `body.ts-v3-auth main, .wp-site-blocks` with `background-color: #f4f8fc !important` — beaten
 *    here on specificity, not on load order.
 *
 * 2. Several text colours below carry !important even though nothing obvious competes for them.
 *    They do compete: home.css:11473 sets `color: var(--ts-auth-heading) !important` on the form
 *    labels for the light skin. An unflagged declaration loses to it no matter how specific it is.
 *
 * 3. Unlike ad-landing.css this file never sets `height` or `overflow: hidden` on html/body. The
 *    landing page is a fixed hero and can afford to clip; a form cannot. Validation notices appear
 *    above the fields, the iOS keyboard halves the viewport, and browser zoom or a large default
 *    font size grows the whole stack. `min-height` pins the footer to the bottom while there is
 *    room and lets the page scroll when there is not — the same look, with no clipping risk.
 *
 * 4. The vertical budget is tight by design: /my-account/ lands within one viewport at 1440x900 and
 *    390x844. Padding and gap values here are sized in dvh for that reason, and adding a fixed
 *    margin anywhere in the stack is what will push it over.
 */

body.ts-authgate.ts-v3-auth {
  /* Canvas. Mirrors --ts-ad-bg / --ts-ad-bg-deep so both pages read as one surface. */
  --ts-authg-bg: var(--ts-blue-deep, #0c3147);
  --ts-authg-bg-deep: #081f2e;

  /* Text and rules on the gradient: header, footer, proof row. */
  --ts-authg-on-dark: #ffffff;
  --ts-authg-on-dark-soft: rgba(255, 255, 255, 0.88);
  --ts-authg-on-dark-muted: rgba(255, 255, 255, 0.68);
  --ts-authg-on-dark-fine: rgba(255, 255, 255, 0.58);
  --ts-authg-on-dark-rule: rgba(255, 255, 255, 0.1);

  /* Text and rules inside the card. */
  --ts-authg-surface: #ffffff;
  --ts-authg-ink: #0c3147;
  --ts-authg-ink-soft: rgba(12, 49, 71, 0.78);
  --ts-authg-muted: rgba(12, 49, 71, 0.56);
  --ts-authg-rule: rgba(12, 49, 71, 0.13);
  --ts-authg-rule-soft: rgba(12, 49, 71, 0.08);
  --ts-authg-accent: #0c3147;
  --ts-authg-focus-ring: rgba(12, 49, 71, 0.28);

  /*
   * The form column carries the attestation checkboxes, whose second statement is a long sentence;
   * below about 26rem it wraps into a ragged stack.
   */
  --ts-authg-col: 27rem;
  --ts-authg-pad: clamp(1.25rem, 4vw, 2rem);
  --ts-authg-card-pad: clamp(1.25rem, 2.5vw, 1.75rem);

  /*
   * Separation between the card and the proof row. Larger than --ts-authg-stack-gap, which spaces
   * items sharing a surface: these two are on different surfaces, and at the stack gap the stat
   * values sat close enough to the card's bottom edge to read as clipped by it.
   */
  --ts-authg-card-gap: clamp(1.125rem, 2.6dvh, 1.75rem);

  /*
   * Vertical rhythm in dvh so the stack compresses on short viewports instead of overflowing,
   * exactly as --ts-ad-stack-gap does on the landing page.
   */
  --ts-authg-stack-gap: clamp(0.75rem, 2dvh, 1.125rem);
  --ts-authg-field-gap: clamp(0.75rem, 1.8dvh, 1rem);

  --ts-authg-title-fs: clamp(1.625rem, 5vw, 2rem);
  --ts-authg-lede-fs: clamp(0.9375rem, 1.5vw, 1rem);
  --ts-authg-meta-fs: 0.875rem;
  --ts-authg-fine-fs: 0.75rem;

  --ts-authg-radius: 0.625rem;
  --ts-authg-radius-card: 0.875rem;
  /* 44px minimum touch target, used for every control below. */
  --ts-authg-tap: 2.75rem;

  /*
   * Min-height for rows whose only job is to be hittable — the checkbox rows and secondary links.
   * Separate from --ts-authg-tap so pointer devices can relax it without shrinking the inputs.
   */
  --ts-authg-row-tap: var(--ts-authg-tap);
}

/* -------------------------------------------------------------------------
 * 1. Viewport and canvas
 *
 * The admin bar is fixed to the top and WordPress offsets <html> to clear it, so a full 100dvh
 * column overflows by exactly the bar's height. Logged-out visitors resolve the offset to 0px.
 * ---------------------------------------------------------------------- */

html:has(body.ts-authgate.ts-v3-auth) {
  --ts-authg-admin-bar: 0px;
  --ts-authg-viewport: calc(100dvh - var(--ts-authg-admin-bar));

  background-color: #081f2e !important;
}

html:has(body.ts-authgate.ts-v3-auth.admin-bar) {
  --ts-authg-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
  html:has(body.ts-authgate.ts-v3-auth.admin-bar) {
    --ts-authg-admin-bar: 46px;
  }
}

body.ts-authgate.ts-v3-auth {
  position: relative;
  isolation: isolate;
  background-color: var(--ts-authg-bg-deep) !important;
  color: var(--ts-authg-on-dark);

  /* Scrollbars and any control outside the card follow the canvas, not the card. */
  color-scheme: dark;
}

/* Same three layers as the landing page: a soft highlight over a top-to-bottom navy ramp. */
body.ts-authgate.ts-v3-auth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 28%,
      rgba(142, 202, 230, 0.16) 0%,
      rgba(74, 134, 154, 0.06) 36%,
      transparent 68%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    linear-gradient(180deg, var(--ts-authg-bg) 0%, var(--ts-authg-bg-deep) 100%);
}

/*
 * The column that pins the footer. min-height rather than height — see note 3 in the file header.
 * The background override needs !important to clear the inline critical CSS in inc/home.php.
 */
body.ts-authgate.ts-v3-auth .wp-site-blocks {
  --wp--style--block-gap: 0;

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--ts-authg-viewport);
  background: transparent !important;
}

body.ts-authgate.ts-v3-auth .wp-site-blocks > header.wp-block-template-part,
body.ts-authgate.ts-v3-auth .wp-site-blocks > footer.wp-block-template-part {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* -------------------------------------------------------------------------
 * 2. Header — on the gradient
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-chrome {
  position: relative;
  z-index: 2;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome--header {
  border-bottom: 0;
  background: transparent;
}

/* Shares the content width with the card, so the logo and the card sit on the same edges. */
body.ts-authgate.ts-v3-auth .ts-auth-chrome__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--ts-authg-col) + var(--ts-authg-pad) * 2);
  margin-inline: auto;
  min-height: 3.75rem;
  padding: 0.75rem var(--ts-authg-pad);
}

/*
 * Spaced with a gap rather than a text node: shortcode output has its inter-tag whitespace stripped
 * (see true_sciences_auth_gate_compact_html), so "True" and "Sciences" would otherwise collide.
 */
body.ts-authgate.ts-v3-auth .ts-auth-chrome__logo {
  display: inline-flex;
  gap: 0.3em;
  font-family: var(--ts-home-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-authg-on-dark);
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__logo-accent {
  font-weight: 400;
  color: var(--ts-authg-on-dark-muted);
}

/* -------------------------------------------------------------------------
 * 3. The stack
 *
 * main takes the space the header and footer leave and centres one column in it. The paired
 * selectors are load-bearing: /my-account/ is identified by .woocommerce-account while
 * /create-account/ carries .ts-create-account-page, and each has to outrank its home.css twin.
 *
 * min-height: 0 !important clears home.css's `min-height: calc(100dvh - var(--ts-auth-chrome))`,
 * which would otherwise add the header and footer a second time inside a column that has already
 * subtracted them.
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth.woocommerce-account:not(.logged-in) .ts-auth-page,
body.ts-authgate.ts-v3-auth .ts-auth-page.ts-create-account-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*
   * gap rather than a margin on .ts-auth-proof: home.css zeroes the margins of this element's
   * children, so a margin there resolved to 0 and the stat values sat flush against the card's
   * bottom edge. A gap on the container is not reachable by that reset.
   */
  gap: var(--ts-authg-card-gap);
  box-sizing: border-box;
  width: 100%;
  min-height: 0 !important;
  /* !important: the block editor's .alignfull rule also sets max-width on this element. */
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: var(--ts-authg-pad) !important;
  padding-block: clamp(0.75rem, 2dvh, 1.5rem) !important;
  background: transparent !important;
}

/* -------------------------------------------------------------------------
 * 4. The card
 *
 * A white surface lifted off the gradient with a shadow rather than a border: on a dark canvas a
 * 1px hairline on a white box reads as a seam, and the shadow does the separating.
 *
 * `.site-container` in the selector is load-bearing. .ts-auth-inner also carries that class, and
 * home.css sets padding-inline on `body.ts-v3-home .site-container:not(…):not(…):not(…)` — five
 * classes. Without the compound the horizontal padding here silently loses while the vertical
 * padding wins, which reads as an off-centre card.
 *
 * !important on the width pair: home.css pins this element with both
 * `width: min(100%, 26rem) !important` and `max-width: 26rem !important`.
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-inner.site-container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--ts-authg-col) !important;
  margin-inline: auto;
  padding: var(--ts-authg-card-pad);
  border: 0;
  border-radius: var(--ts-authg-radius-card);
  background: var(--ts-authg-surface);
  box-shadow: 0 1.25rem 2.75rem rgba(4, 18, 28, 0.42);
  /* The card is a light surface; its native controls must not inherit the canvas scheme. */
  color-scheme: light;
  color: var(--ts-authg-ink);
}

/* -------------------------------------------------------------------------
 * 5. Heading — inside the card
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-head {
  margin: 0 0 var(--ts-authg-stack-gap);
  text-align: center;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-head__title,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-head .wp-block-post-title {
  margin: 0;
  font-size: var(--ts-authg-title-fs);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ts-authg-ink) !important;
  text-align: center;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-intro,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce > .ts-auth-intro,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-head .ts-auth-intro {
  max-width: 22rem;
  margin: 0.375rem auto 0 !important;
  font-size: var(--ts-authg-lede-fs);
  line-height: 1.45;
  color: var(--ts-authg-muted) !important;
  text-align: center;
}

/* -------------------------------------------------------------------------
 * 6. Form contents
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-form-row,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .form-row {
  margin: 0 0 var(--ts-authg-field-gap);
  padding: 0;
}

/* !important: see note 2 in the file header. */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--ts-authg-ink) !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .required {
  color: var(--ts-authg-muted) !important;
  text-decoration: none;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .input-text,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="text"],
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="email"],
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="password"] {
  width: 100%;
  min-height: var(--ts-authg-tap);
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ts-authg-rule);
  border-radius: var(--ts-authg-radius);
  background: var(--ts-authg-surface) !important;
  /* 16px: iOS zooms the page on focus for anything smaller. */
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ts-authg-ink) !important;
  box-shadow: none;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .input-text:focus,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="text"]:focus,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="email"]:focus,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="password"]:focus {
  border-color: var(--ts-authg-accent);
  outline: 2px solid var(--ts-authg-focus-ring);
  outline-offset: 1px;
}

/*
 * !important on the background: home.css sets a teal promotional gradient here the same way. The
 * gate is meant to read as an access control, so the primary action is solid ink. The pill radius
 * is the one shape it borrows from the landing page's CTA.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest button[type="submit"],
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-form-register__submit,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-form-login__submit {
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 999px !important;
  background: var(--ts-authg-accent) !important;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: #ffffff !important;
  cursor: pointer;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest button[type="submit"]:hover,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest button[type="submit"]:focus-visible {
  background: #15425c !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-privacy-policy-text {
  margin: 0 0 var(--ts-authg-field-gap);
}

/* wpautop wraps the notice, and the inner paragraph keeps its default 1em block margins. */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-privacy-policy-text p {
  margin: 0;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ts-authg-muted);
}

/* -------------------------------------------------------------------------
 * 7. Checkbox rows and secondary links
 *
 * These were the real mobile defects: a 13px "remember me" box, a 22px password reveal and a 15px
 * "forgot password?" link, none of them hittable.
 * ---------------------------------------------------------------------- */

/*
 * `label.ts-research-gate__check` rather than `.ts-research-gate__check`: section 6 sets
 * `display: block` on every label in the card, which would collapse these rows onto their boxes.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest label.ts-research-gate__check,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest label.woocommerce-form-login__rememberme {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  /* min-height, not padding: the two-line statement is already tall, the one-line one is 35px. */
  min-height: var(--ts-authg-row-tap);
  margin: 0;
  padding-block: 0.375rem;
  font-size: var(--ts-authg-meta-fs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ts-authg-ink-soft) !important;
  cursor: pointer;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest input[type="checkbox"] {
  /* 13px is unhittable; 18px in a padded row clears the 44px target. */
  width: 1.125rem;
  height: 1.125rem;
  /* Optically centres the box on the first line of a 14px/1.45 label. */
  margin: 0.1875rem 0 0;
  flex: 0 0 auto;
  accent-color: var(--ts-authg-accent);
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .show-password-input,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest button.ts-password-toggle,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest [aria-label="Show password"] {
  /* Keeps the icon its original size but extends the hit area around it. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ts-authg-tap);
  height: var(--ts-authg-tap);
}

/*
 * "Remember me" left, "Forgot password?" right, on one row.
 * `p.form-row` is in the selector only for weight: home.css stacks every non-WooCommerce .form-row
 * in this shell with `flex-direction: column`, at exactly the specificity this rule would otherwise
 * have, and it loads second.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest p.form-row.ts-login-options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 var(--ts-authg-field-gap);
}

/*
 * WooCommerce clearfixes .form-row with `display: table` pseudo-elements, and home.css turns these
 * rows into flex containers, which promotes both to real flex items. They were costing the options
 * row ~48px of inset on each side and the submit row ~20px of gap above the button.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .form-row::before,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .form-row::after {
  display: none;
}

/*
 * The alternate action ("Sign in" / "Create one") and the reset link, so they get a full tap target
 * rather than 36px.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .ts-login-options__reset,
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-footer-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ts-authg-row-tap);
  font-size: var(--ts-authg-meta-fs);
  font-weight: 600;
  color: var(--ts-authg-accent) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ts-authg-rule-soft);
  font-size: var(--ts-authg-meta-fs);
  color: var(--ts-authg-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
 * 8. Research access confirmation (inside the card)
 *
 * A hairline-ruled group rather than two bordered boxes. The boxes were a modal affordance: inside
 * a card that is already a surface they stacked a third one, and the two borders plus their padding
 * cost ~40px for no information. The rows themselves are laid out by section 7, which pairs them
 * with "remember me" so both checkbox rows in the card share one geometry.
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-research-gate {
  min-width: 0;
  margin: 0 0 var(--ts-authg-field-gap);
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--ts-authg-rule);
  border-radius: 0;
  background: transparent;
}

/*
 * float: none — browsers float the legend out of a fieldset by default.
 * The legend notches the border-top, so the group reads as a labelled rule; padding-inline-end is
 * what keeps the text off the hairline it interrupts.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-research-gate__legend {
  float: none;
  width: auto;
  margin: 0 0 0.125rem;
  padding: 0 0.625rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-authg-muted);
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-research-gate__check strong {
  font-weight: 600;
  color: var(--ts-authg-ink) !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-research-gate__fine {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--ts-authg-muted) !important;
}

/*
 * "We'll email you a link to set your password." on /create-account/.
 * `.ts-account-shell--guest` only to outweigh home.css, which pulls this note up by -0.375rem.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest .ts-register-form-note {
  /* Cancels the email row's own bottom gap so the note reads as helper text on that input. */
  margin: calc(var(--ts-authg-field-gap) * -1 + 0.25rem) 0 var(--ts-authg-field-gap);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ts-authg-muted);
}

/* -------------------------------------------------------------------------
 * 9. Notices — inside the card, so light
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-error,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-message,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-info,
body.ts-authgate.ts-v3-auth .ts-auth-page .wc-block-components-notice-banner {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--ts-authg-field-gap);
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--ts-authg-rule);
  border-left: 3px solid var(--ts-authg-accent);
  border-radius: var(--ts-authg-radius);
  background: rgba(12, 49, 71, 0.04) !important;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ts-authg-ink) !important;
  list-style: none;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-error {
  border-left-color: #b3261e;
  background: rgba(179, 38, 30, 0.05) !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-error li,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-message li {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-error a,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-message a,
body.ts-authgate.ts-v3-auth .ts-auth-page .woocommerce-info a {
  color: var(--ts-authg-accent) !important;
}

/* The store-notices block wrapper adds its own margin on /create-account/. */
body.ts-authgate.ts-v3-auth .ts-auth-page .wc-block-store-notices {
  margin: 0 0 var(--ts-authg-field-gap);
}

/*
 * Validation notices render with margin: 0, so a rejected submit put the notice's bottom border on
 * the same pixel as the "Username or email address" label underneath it.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-notice {
  margin: 0 0 var(--ts-authg-field-gap);
}

/* -------------------------------------------------------------------------
 * 10. Fine print — on the gradient, below the card
 * ---------------------------------------------------------------------- */

/*
 * Wider than the card. The notice is fixed legal text, so the only way to shorten the block is to
 * give it more measure: at the card's 27rem it set four lines, at 42rem it sets two.
 */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-proof {
  box-sizing: border-box;
  width: 100%;
  max-width: 42rem;
  /* Spacing above comes from the container's gap — see section 3. */
  margin: 0 auto;
  padding: 0;
}

body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-proof__fine {
  max-width: 100%;
  margin: 0 auto;
  font-size: var(--ts-authg-fine-fs);
  line-height: 1.45;
  color: var(--ts-authg-on-dark-fine);
  text-align: center;
}

/* -------------------------------------------------------------------------
 * 11. Footer — on the gradient
 *
 * One row, links left and copyright right, as on the landing page. The research-use notice is not
 * here — it prints once under the card (inc/auth-gate.php, true_sciences_auth_fine_print) so this
 * stays a 64px bar instead of a 187px block.
 * ---------------------------------------------------------------------- */

body.ts-authgate.ts-v3-auth .ts-auth-chrome--footer {
  border-top: 1px solid var(--ts-authg-on-dark-rule);
  background: transparent;
}

/*
 * home.css paints the footer template-part wrapper deep navy on auth screens with !important. It is
 * transparent here because the canvas behind it is already the gradient.
 */
body.ts-authgate.ts-v3-auth .wp-site-blocks > footer.wp-block-template-part {
  background: transparent !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__inner--footer {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
  min-height: 0;
  padding-block: 0.75rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  text-align: left;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 1.25rem;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-size: var(--ts-authg-meta-fs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.76) !important;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__links a:hover {
  color: var(--ts-authg-on-dark) !important;
  text-decoration: underline;
}

body.ts-authgate.ts-v3-auth .ts-auth-chrome__copyright {
  margin: 0;
  font-size: var(--ts-authg-fine-fs);
  line-height: 1.5;
  color: var(--ts-authg-on-dark-fine);
}

/* -------------------------------------------------------------------------
 * 12. Storefront furniture that survives on these screens
 * ---------------------------------------------------------------------- */

/* The mini-cart drawer markup is printed by the header block even when the header is replaced. */
body.ts-authgate .wc-block-mini-cart__drawer,
body.ts-authgate .wp-block-woocommerce-mini-cart-contents {
  display: none !important;
}

/* The support bar duplicates the footer's support links on a page this short. */
body.ts-authgate.ts-v3-auth .ts-auth-page .ts-home-support-bar {
  display: none;
}

body.ts-authgate.ts-v3-auth .starry-bg {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.ts-authgate .ts-auth-page *,
  body.ts-authgate .ts-auth-chrome * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
 * 13. Short and narrow viewports
 *
 * Compression only. Nothing here switches the page to a scrolling layout, because it was never
 * locked to one — see note 3 in the file header. These blocks widen the range of viewports that
 * fit without scrolling; past that the column simply grows and the page scrolls.
 * ---------------------------------------------------------------------- */

/*
 * 44px rows exist for fingers. A mouse hits an 18px checkbox and a text link fine, and the four
 * checkbox/link rows in the sign-in card were spending ~40px of the viewport on padding no pointer
 * user needs. Touch and hybrid devices keep the full target.
 */
@media (pointer: fine) and (hover: hover) {
  body.ts-authgate.ts-v3-auth {
    --ts-authg-row-tap: 2.25rem;
  }
}

@media (max-width: 639px) {
  body.ts-authgate.ts-v3-auth {
    --ts-authg-lede-fs: 0.9375rem;
    --ts-authg-meta-fs: 0.8125rem;
    --ts-authg-fine-fs: 0.6875rem;
  }

  /* Stacked and centred, as the landing footer does below this width. */
  body.ts-authgate.ts-v3-auth .ts-auth-chrome__inner--footer {
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding-block: 0.625rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }

  body.ts-authgate.ts-v3-auth .ts-auth-chrome__links {
    justify-content: center;
  }
}

/* Short phones — iPhone SE (667px), mini landscape. */
@media (max-height: 700px) {
  body.ts-authgate.ts-v3-auth {
    --ts-authg-stack-gap: clamp(0.625rem, 1.6dvh, 0.875rem);
    --ts-authg-field-gap: clamp(0.5rem, 1.4dvh, 0.75rem);
    --ts-authg-title-fs: clamp(1.5rem, 4.6vw, 1.75rem);
    --ts-authg-card-pad: 1.125rem;
  }

  body.ts-authgate.ts-v3-auth .ts-auth-chrome__inner {
    min-height: 3rem;
    padding-block: 0.5rem;
  }
}

/* Very short — iPhone SE 1st gen (568px), landscape phones. */
@media (max-height: 600px) {
  body.ts-authgate.ts-v3-auth {
    --ts-authg-title-fs: clamp(1.375rem, 4.2vw, 1.5rem);
    --ts-authg-fine-fs: 0.625rem;
    --ts-authg-field-gap: clamp(0.4375rem, 1.2dvh, 0.625rem);
    --ts-authg-card-pad: 1rem;
  }

  /*
   * The lede is the only line above the submit button that nothing depends on, and dropping it is
   * what gets "Sign in" above the fold at 320x568 — the H1 already says which form this is.
   */
  body.ts-authgate.ts-v3-auth .ts-auth-page .ts-auth-intro {
    display: none;
  }

  body.ts-authgate.ts-v3-auth .ts-auth-page .ts-account-shell--guest button[type="submit"] {
    min-height: 2.75rem;
  }

  body.ts-authgate.ts-v3-auth .ts-auth-chrome__inner--footer {
    padding-block: 0.5rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Narrow phones — 320px wide. */
@media (max-width: 359px) {
  body.ts-authgate.ts-v3-auth {
    --ts-authg-pad: 1rem;
    --ts-authg-card-pad: 1.125rem;
    --ts-authg-title-fs: clamp(1.375rem, 6.5vw, 1.5rem);
    --ts-authg-lede-fs: 0.875rem;
  }

  body.ts-authgate.ts-v3-auth .ts-auth-chrome__links {
    gap: 0 0.75rem;
  }
}