/*
 * Member registration (register.php). Loaded AFTER css/login-page.css, which supplies the whole shell
 * (.lg-page, .lg-shell, .lg-folio, .lg-card, fields, buttons, flash, Google block, tokens). This file only adds
 * what the sign-up page needs on top, all prefixed rg- so nothing here can leak into login or the claim page:
 *   - the "what a member account gives you" list in the navy folio,
 *   - the "already on the society's list?" claim panel that holds the Continue-with-Google control,
 *   - the three numbered form groups (Identity / Contact / Security) as real <fieldset>s,
 *   - the live password-length meter and "passwords match" hint (both only used when JS is on).
 * Light theme only (site-wide). Motion: transform/opacity only, removed for prefers-reduced-motion.
 */

/* ---------- Folio extras ---------- */

/* The offer list is desktop-only: on phones and tablets the folio is a slim banner above the form. */
.rg-offer { display: none; margin: 0; }
.rg-offer__title {
  margin: 0 0 0.8rem;
  color: var(--lg-gold-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lg-page .rg-offer__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-page .rg-offer__list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.75rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
}
/* A short gold dash instead of a bullet: reads like the rule above the quotation. */
.lg-page .rg-offer__list li::before {
  content: '';
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 1.05rem;
  height: 1px;
  background: var(--lg-gold);
}

/* ---------- "Already on the society's list?" claim panel ---------- */

.lg-page .rg-claim {
  position: relative;
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.2rem 1.2rem 1.55rem;
  overflow: hidden;
  background: var(--lg-cream);
  border: 1px solid rgba(201, 164, 107, 0.55);
  border-radius: var(--lg-radius-sm);
}
/* The gold spine of a ledger / membership register. */
.lg-page .rg-claim::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--lg-gold);
}
.lg-page .rg-claim__title {
  margin: 0 0 0.3rem;
  color: var(--lg-navy);
  font-family: var(--lg-serif);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.lg-page .rg-claim__lede {
  margin: 0 0 0.95rem;
  color: var(--lg-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.lg-page .rg-claim .lg-google-wrap { margin: 0; }

/* ---------- Form groups ---------- */

.lg-page .rg-form { margin: 0; }

.rg-required {
  margin: 0 0 1.15rem;
  color: var(--lg-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.lg-page .rg-group {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
/* The legend floats so it can be laid out like any block (a bare <legend> cannot be flex/grid in every browser);
   the next sibling clears it, and the fieldset (its own formatting context) still contains it. */
.lg-page .rg-group__title {
  display: flex;
  float: left;
  align-items: baseline;
  gap: 0.7rem;
  width: 100%;
  margin: 0 0 1.05rem;
  padding: 0 0 0.6rem;
  color: var(--lg-navy);
  border-bottom: 1px solid var(--lg-line);
  font-family: var(--lg-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
}
.lg-page .rg-group__title + * { clear: both; }
.rg-group__no {
  flex: 0 0 auto;
  min-width: 2.2rem;
  color: var(--lg-gold-ink);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.lg-page .rg-opt {
  color: var(--lg-muted);
  font-weight: 400;
}

/* ---------- Live hints (js/register-page.js turns them on) ---------- */

.lg-page .rg-count[data-state='ok'],
.lg-page .rg-match[data-state='ok'] {
  color: #1d4f2e;
  font-weight: 700;
}
.lg-page .rg-count[data-state='ok']::before,
.lg-page .rg-match[data-state='ok']::before {
  content: '\2713';
  content: '\2713' / '';
  margin-right: 0.4em;
}
.lg-page .rg-match[data-state='diff'] { color: #5c3f06; }

/* A thin ruler under the password: fills left to right as the length approaches the real minimum. */
.rg-meter {
  display: block;
  height: 4px;
  margin: 0.5rem 0 0;
  overflow: hidden;
  background: rgba(10, 35, 66, 0.12);
  border-radius: 2px;
}
.rg-meter[hidden] { display: none; }
.rg-meter__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lg-gold-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--lg-ease), background-color 0.2s ease;
}
.rg-meter[data-state='ok'] .rg-meter__bar { background: #2e7d4f; }

/* Visually hidden, still announced: the polite status regions for "long enough" / "match". */
.lg-page .rg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Server error list inside the flash ---------- */

.rg-page .lg-flash .form-message ul { margin: 0; padding: 0 0 0 1.05rem; }
.rg-page .lg-flash .form-message li { margin: 0 0 0.25rem; padding: 0; }
.rg-page .lg-flash .form-message li:last-child { margin-bottom: 0; }
/* One message (CSRF, throttle): no bullet, it would only mark a list of one. */
.rg-page .lg-flash .form-message li:only-child { margin-left: -1.05rem; list-style: none; }

/* Keep a focused control (keyboard, or the browser jumping to the first invalid field) clear of the sticky site
   header above and of the fixed "back to top" button below. Same device the Settings pages use. */
.rg-page :is(input, button, a) { scroll-margin-block: 7rem 6.5rem; }

/* On phones the site-wide round "back to top" button (fixed, bottom right) lands exactly on the show/hide-password
   buttons whenever a password field scrolls past the bottom edge, and a tap there would jump to the top instead of
   revealing the password. There is no spot for it that avoids every control on a 320px form, so it is not shown
   on this page below 641px; the sticky header stays available and tablets/desktops keep the button (the card ends
   well clear of it there). */
@media (max-width: 640px) {
  body:has(.rg-page) #backToTopBtn { display: none !important; }
}

/* ---------- Phones ---------- */

/* The Google button inside the claim panel is the widest control on a 320px screen: trim its padding so the
   label stays on one line (login-page.css gives it 1.25rem each side, tuned for the unboxed login card). */
@media (max-width: 380px) {
  .lg-page .rg-claim { padding: 0.95rem 0.85rem 1rem 1.15rem; }
  .lg-page .rg-claim .lg-google { gap: 0.4rem; padding-inline: 0.5rem; font-size: 0.95rem; }
  .lg-page .rg-claim .lg-google__mark { width: 1.6rem; height: 1.6rem; }
}

@media (max-width: 599px) {
  .lg-page .rg-claim { padding: 1rem 1rem 1.05rem 1.3rem; }
  .lg-page .rg-claim__title { font-size: 1.2rem; }
  .lg-page .rg-group { margin-bottom: 1.25rem; }
}

/* ---------- Desktop: the folio stays in view while the longer form scrolls ---------- */

@media (min-width: 900px) {
  .rg-offer { display: block; }
  .lg-page .rg-claim { margin-bottom: 1rem; }
  .lg-page .rg-group { margin-bottom: 1.25rem; }
}

/* Only when the viewport is tall enough to hold the whole folio, so no part of it can be stuck out of reach.
   top clears the sticky site header. */
@media (min-width: 900px) and (min-height: 760px) {
  .lg-page .rg-folio {
    position: sticky;
    top: 6.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rg-meter__bar { transition: none; }
}

@media (forced-colors: active) {
  .lg-page .rg-claim { border: 1px solid CanvasText; }
  .lg-page .rg-claim::before { background: Highlight; }
  .lg-page .rg-group__title { border-bottom-color: CanvasText; }
  .lg-page .rg-offer__list li::before { background: CanvasText; }
  .rg-meter { border: 1px solid CanvasText; }
  .rg-meter__bar { background: Highlight; forced-color-adjust: none; }
}

/* ---------- Agreements (terms + age): two real checkboxes, never pre-ticked ---------- */
/* The input itself is a 44 x 44 target (the page's touch-target rule); the visible 22 px box is drawn in its middle. The label is
   clickable too, so the whole row is a target. */
.lg-page .rg-agree { margin-bottom: 0.85rem; }
.lg-page .rg-check {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.15rem;
  align-items: start;
  padding: 0.15rem 0.9rem 0.15rem 0.2rem;
  background: #fff;
  border: 1.5px solid var(--lg-field-line);
  border-radius: 6px;
}
.lg-page .rg-check:has(.rg-check__input:checked) { border-color: var(--lg-navy); background: #f4f7fc; }
.lg-page .rg-check:has(.rg-check__input[aria-invalid='true']) { border-color: var(--lg-danger); background: #fffafa; }
.lg-page .rg-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent no-repeat center / 1.4rem 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3' fill='%23fff' stroke='%23566179' stroke-width='2'/%3E%3C/svg%3E");
  cursor: pointer;
}
.lg-page .rg-check__input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3' fill='%230a2342' stroke='%230a2342' stroke-width='2'/%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lg-page .rg-check__input[aria-invalid='true']:not(:checked) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='3' fill='%23fff' stroke='%23b3261e' stroke-width='2.4'/%3E%3C/svg%3E");
}
.lg-page .rg-check__input:focus-visible { outline: 3px solid var(--lg-navy); outline-offset: -3px; }
.lg-page .rg-check__label { padding: 0.62rem 0; font-size: 0.95rem; line-height: 1.5; color: var(--lg-ink); cursor: pointer; }
.lg-page .rg-check__label a { color: var(--lg-navy); text-decoration: underline; text-underline-offset: 3px; }
@media (forced-colors: active) {
  /* Forced colours repaint backgrounds, which would erase the drawn box: fall back to the browser's own checkbox. */
  .lg-page .rg-check__input { appearance: auto; -webkit-appearance: auto; background-image: none; }
}