/* ==========================================================================
   AmPuH SEO Intelligence - Authentication surfaces  v0.31.6
   --------------------------------------------------------------------------
   Shared by /login, /register and /verify-email. These are the only three
   templates that load this file, and the first three pages a new user sees.

   THE :root BLOCK IS RETAINED AND LOAD-BEARING. auth.css sits in the TINT band
   for --surface: it defines 92% lightness and uses it as the sign-in panel fill
   against a 96% page. The token layer deliberately does not define --surface,
   because 22 other stylesheets use the same name for a 98-99.5% card. Aliasing
   it globally would collapse the panel into the page background here. Deleting a
   private :root without checking that cost 23 declarations on google-cloud.css
   in v0.31.3; see PATCH-v0.31.4 section 1.

   WHY THE TYPOGRAPHY IS FIXED HERE AND NOT GLOBALLY: enterprise-interface.css,
   which carries the v0.31.0 heading retune, is scoped to
   body:has(> header.enterprise-app-header). index.php only injects that shell
   into pages whose header contains a /logout form, so these three public pages
   never received it and still rendered h1 at up to 104px.
   ========================================================================== */

:root{
  --paper:oklch(96% .012 96);
  --surface:oklch(92% .017 112);
  --ink:oklch(25% .026 151);
  --muted:oklch(50% .025 145);
  --pine:oklch(42% .095 155);
  --pine-dark:oklch(31% .072 157);
  --lime:oklch(82% .145 116);
  --bad:oklch(48% .14 28);
  --line:oklch(82% .02 126);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.55 var(--ds-font-sans,system-ui);
  -webkit-font-smoothing:antialiased;
}
header,main,footer{width:100%;margin-inline:auto;padding-inline:clamp(16px,5vw,80px)}

/* ---------------------------------------------------------------- HEADER */
header{
  min-height:88px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--ds-space-4,16px);
  border-bottom:1px solid var(--line);
  position:relative;
}
header::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px auto;
  width:28%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--lime),var(--pine));
  opacity:.8;
}
.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
/* The template ships the logo directly. index.php also rewrites this anchor on
   /login, /register and /verify-email, so at runtime both paths agree. */
.brand>img{display:block;width:auto;height:42px;max-width:100%}
/* Retained for the fallback path only: if the output buffer does not run and an
   older template renders the WA wordmark, it still looks deliberate. */
.brand span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pine);color:var(--paper);font-weight:850}
.brand strong{font-size:.875rem}
.header-link{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 var(--ds-space-4,16px);
  border:1px solid var(--line);
  border-radius:var(--ds-radius-md,10px);
  color:var(--pine-dark);
  font-size:.875rem;
  font-weight:700;
  text-decoration:none;
}
.auth-nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto;padding:5px;border:1px solid color-mix(in oklab,var(--line) 72%,transparent);border-radius:14px;background:color-mix(in oklab,var(--paper) 78%,transparent);box-shadow:0 6px 18px -14px oklch(25% .05 155 / .35)}
.header-link:hover{background:var(--surface)}
.header-link:focus-visible{outline:3px solid color-mix(in oklab,var(--lime) 72%,var(--pine));outline-offset:3px}
.header-link--primary{border-color:var(--pine);background:var(--pine);color:var(--paper);box-shadow:0 8px 18px -13px var(--pine)}
.header-link--primary:hover{background:var(--pine-dark);color:var(--paper)}

/* ------------------------------------------------------------------ MAIN */
main{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,460px);
  gap:clamp(40px,6vw,88px);
  padding-block:clamp(40px,6vw,72px);
  align-items:center;
  position:relative;
}
main>*{min-width:0}
main::before{
  content:"";
  position:absolute;
  inset:8% 42% 12% -16%;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 35%,oklch(82% .145 116 / .13),transparent 34%),
    linear-gradient(135deg,transparent 0 47%,oklch(42% .095 155 / .055) 47.2% 47.5%,transparent 47.7% 100%);
  opacity:.7;
}

/* Semantic wrapper for the left column. min-width:0 stops a long word in the
   lead paragraph from forcing the grid track wider than its share. */
.intro{min-width:0;position:relative;z-index:1}

/* ------------------------------------------------------------ TYPOGRAPHY */
/* Was clamp(3rem,7vw,6.5rem): up to 104px on a sign-in form. Retuned to the
   token display scale, which tops out at 38px. */
h1{
  margin:var(--ds-space-4,16px) 0 0;
  max-width:22ch;
  color:var(--ink);
  font-size:var(--ds-font-size-display,clamp(1.75rem,2.4vw,2.375rem));
  font-weight:700;
  line-height:var(--ds-leading-tight,1.18);
  letter-spacing:-.02em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.panel-title{
  margin:var(--ds-space-2,8px) 0 var(--ds-space-5,20px);
  color:var(--ink);
  font-size:var(--ds-font-size-xl,1.25rem);
  font-weight:650;
  line-height:var(--ds-leading-snug,1.35);
  letter-spacing:-.012em;
}
.lead{
  max-width:56ch;
  margin:var(--ds-space-5,20px) 0 0;
  color:var(--muted);
  font-size:1.0625rem;
  line-height:var(--ds-leading-normal,1.55);
  text-wrap:pretty;
}

/* Trust points. Was an <ol> with list-position inside, which read as ranked
   steps; these are parallel facts, so an unordered list is correct. Markers are
   drawn in CSS so no glyph is announced as content. */
.assurances{
  display:grid;
  gap:var(--ds-space-3,12px);
  margin:var(--ds-space-6,24px) 0 0;
  padding:var(--ds-space-5,20px) 0 0;
  border-top:1px solid var(--line);
  list-style:none;
  color:var(--muted);
  font-size:.9375rem;
}
.assurances>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ds-space-3,12px);align-items:start}
.assurances>li::before{
  content:"";
  width:7px;height:7px;
  margin-top:.55em;
  border-radius:50%;
  background:var(--pine);
}

/* ------------------------------------------------------------ FORM PANEL */
.form-panel{
  align-self:start;
  width:100%;
  max-width:500px;
  justify-self:end;
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:clamp(20px,3vw,32px);
  border:1px solid color-mix(in oklab,var(--pine) 18%,var(--line));
  border-radius:24px;
  background:
    linear-gradient(145deg,oklch(96% .018 112 / .96),oklch(91% .022 112 / .96));
}
.form-panel::before{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin:-32px 0 28px;
  border-radius:0 0 6px 0;
  background:linear-gradient(90deg,var(--pine),var(--lime));
}
.auth-security-badge{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  padding:10px 12px;
  border:1px solid color-mix(in oklab,var(--pine) 16%,var(--line));
  border-radius:12px;
  background:oklch(98% .012 112 / .72);
  color:var(--pine-dark);
}
.auth-security-badge__mark{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  background:var(--pine);
  color:var(--paper);
  font-size:.75rem;
  font-weight:800;
}
.auth-security-badge strong,
.auth-security-badge small{display:block}
.auth-security-badge strong{font-size:.8125rem;letter-spacing:.01em}
.auth-security-badge small{margin-top:2px;color:var(--muted);font-size:.75rem;line-height:1.35}
.auth-form{display:grid;gap:var(--ds-space-5,20px);margin:0}
/* SC 1.4.11 requires a 3:1 boundary on a control. --ds-border-strong is tuned
   against the 97-99.5% surfaces used everywhere else and reaches only 2.98:1
   on this 92% panel tint, which is a fail by 0.02. Darkened locally to 58%
   lightness, measured at 3.37:1 on the panel. Scoped to .form-panel so the
   global token is unchanged for the 22 stylesheets tuned against it. */
.form-panel :is(.ds-input,.ds-select,.ds-textarea){border-color:oklch(58% .022 126)}
.form-panel :is(.ds-input,.ds-select,.ds-textarea):hover{border-color:var(--pine)}
.form-panel .consent input{outline-offset:2px}
.auth-form .ds-field>label{font-weight:650}
.consent{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:var(--ds-space-3,12px);
  align-items:start;
  font-size:.875rem;
  line-height:var(--ds-leading-snug,1.35);
  cursor:pointer;
}
.consent input{width:18px;height:18px;min-height:18px;margin-top:2px;accent-color:var(--pine)}
.form-panel .ds-help{margin-top:var(--ds-space-5,20px)}
.form-panel .ds-help a{color:var(--pine-dark);font-weight:650}

/* ---------------------------------------------------------- STATUS PAGE */
.status-page{display:block;grid-template-columns:none;max-width:820px}
.status-page section{max-width:68ch}
.status-page .ds-alert{margin-block:var(--ds-space-5,20px)}
.reasons{
  display:grid;
  gap:var(--ds-space-4,16px);
  margin:var(--ds-space-5,20px) 0;
  padding:0;
  list-style:none;
  color:var(--muted);
}
.reasons strong{color:var(--ink)}
.status-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ds-space-3,12px);
  margin:var(--ds-space-6,24px) 0 0;
}

/* ---------------------------------------------------------------- FOOTER */
footer{
  min-height:80px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--ds-space-2,8px);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.875rem;
}

/* -------------------------------------------------------- reCAPTCHA STATE */
/* recaptcha-v3.js writes into [data-recaptcha-status] and toggles [hidden]. */
.recaptcha-status{
  display:block;
  margin-top:var(--ds-space-2,8px);
  padding:10px 12px;
  border:1px solid var(--ds-warning,oklch(52.5% .11 72));
  border-radius:var(--ds-radius-sm,6px);
  background:var(--ds-warning-tint,oklch(94.5% .05 82));
  color:var(--ds-warning,oklch(52.5% .11 72));
  font-size:.75rem;
  font-weight:650;
}
.recaptcha-status[hidden]{display:none}
.auth-form [data-captcha-widget]{
  min-height:0;
  margin-top:-4px;
  overflow:hidden;
  border-radius:10px;
}
/* The button is server-rendered disabled and enabled by recaptcha-v3.js once
   verification is ready. cursor:wait signals "working", not "broken". */
form button[data-recaptcha-submit][disabled]{cursor:wait;opacity:.82;transform:none}
noscript .ds-alert{margin-top:var(--ds-space-4,16px)}

/* ------------------------------------------------------------- 320-819px */
@media(max-width:819px){
  .auth-nav{gap:6px;padding:4px}
  .header-link{min-height:40px;padding-inline:12px;font-size:.8125rem}
  main{grid-template-columns:1fr;gap:var(--ds-space-10,40px);align-items:start}
  main::before{inset:0 -30% 45% -30%;opacity:.55}
  .brand strong{display:none}
  .brand>img{height:38px}
  footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  .status-actions .ds-btn{width:100%}
}
@media(max-width:420px){
  header,main,footer{width:100%;padding-inline:12px}
  .auth-header{align-items:center;gap:10px}
  .auth-nav{max-width:100%;}
  .header-link{padding-inline:10px;font-size:.75rem}
  main{padding-block:32px}
  .form-panel{max-width:none;padding:24px 18px;border-radius:20px}
  .form-panel::before{margin:-24px 0 24px}
  .auth-security-badge{align-items:flex-start}
}

/* ------------------------------------------------------------------ TRUSTED DEVICE  v0.97.0
   The one checkbox on any sign-in surface. Built as a label wrapping the input, the same construction
   .dns-toggle uses on the crawler-log page: the whole block becomes the hit target, which matters more
   here than anywhere because the alternative is a 13px tick box on a phone.
   IT IS NOT STYLED TO LOOK INVITING. This grants a 30-day credential that skips the second factor, so
   it reads as a considered choice rather than a convenience: no accent colour, no fill, and the cost is
   spelled out in the <small> rather than implied by a label like "remember me". */
.tf-remember{
  display:flex;
  gap:var(--ds-space-3,12px);
  align-items:flex-start;
  margin:0 0 var(--ds-space-4,16px);
  padding:var(--ds-space-3,12px);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-sm,6px);
  background:var(--ds-surface-sunken,#f4f6f4);
  cursor:pointer;
}
.tf-remember input{
  margin:2px 0 0;
  flex:0 0 auto;
  width:1rem;
  height:1rem;
}
.tf-remember strong{
  display:block;
  font-size:var(--ds-font-size-sm,.8125rem);
  font-weight:600;
}
.tf-remember small{
  display:block;
  margin-top:var(--ds-space-1,4px);
  color:var(--ds-text-muted);
  font-size:var(--ds-font-size-xs,.75rem);
  line-height:1.45;
}

/* ==========================================================================
   v1.80.13. AUTH SURFACE ELEVATION — the two rules of the v2 pack that survived review.
   --------------------------------------------------------------------------
   WHAT WAS TAKEN AND WHY THE REST WAS NOT. An external "UI Enhancement Pack v2" proposed 52 lines
   here. Most of them fought rules already in this file: `padding:0` on .assurances would have removed
   the 20px that pairs with its border-top separator; `.assurances li{padding-left:1.5em}` would have
   double-indented a list already laid out as a two-column grid; `.assurances li::before{content:"✓"}`
   would have put a check glyph inside the existing 7px pine dot, because that dot is drawn by the
   same pseudo-element and the pack did not reset its width, height or background; a bare `footer`
   rule re-declared four properties this file already sets at line 200, on a sheet home.php also
   loads; and `.auth-form .ds-field{margin-bottom:20px}` would have doubled the field rhythm, because
   .auth-form is already `display:grid` with `gap:20px`. Narrowing h1 to 16ch and .lead to 42ch would
   have overridden measures tuned in v0.31.0 and v0.31.6 with no stated reason.

   THE PANEL SHADOW IS THE ONE REAL GAIN. This panel had no elevation of its own and took the design
   system's `--ds-shadow-sm` through a `:where()` rule in ampuh-tokens.css.

   AND IT NEEDS ITS HOVER STATED, WHICH THE PACK DID NOT DO. ampuh-tokens.css carries
   `:where(.ds-card, .form-panel, ...):hover { box-shadow: var(--ds-shadow-md) }`. `:where()` is zero
   specificity but `:hover` is not, so that rule is (0,1,0) - exactly the weight of a bare
   `.form-panel` - and tokens is injected last, so it wins on order. The pack's base shadow would
   therefore have been REPLACED on hover by the lighter md shadow, and a shadow that shrinks when the
   pointer crosses it reads as a rendering fault. `.form-panel:hover` is (0,2,0) and wins on weight
   rather than on order, so the elevation simply holds. A pseudo-class outranks a two-class rule, and
   this is the third time that has decided a rule in this codebase.

   NO !important ANYWHERE, and none is needed once the weights are read correctly.
   ========================================================================== */
.form-panel{
  box-shadow:0 1px 3px oklch(25% .05 155 / .05), 0 12px 32px -12px oklch(25% .05 155 / .14);
}
/* The same shadow, deliberately: this panel is not interactive, so hover must not animate it. */
.form-panel:hover{
  box-shadow:0 1px 3px oklch(25% .05 155 / .05), 0 12px 32px -12px oklch(25% .05 155 / .14);
}
/* The submit sits closer to its fields than the grid gap alone allows, without touching that gap. */
.auth-form .ds-btn--primary{margin-top:var(--ds-space-2,8px)}

.auth-handoff{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--ds-pine);border-radius:8px;background:var(--ds-pine-tint);color:var(--ds-text-muted);font-size:.8125rem;line-height:1.55}.auth-handoff strong{color:var(--ds-text)}