/* ============================================================
   AUTH V4 — "Provisions & Glass" reskin for the auth pages
   Scope: login / register / forgot-password / reset-password /
   verify-email ONLY. Every rule is gated on `body.authv4` (or the
   authv4-* button classes) so nothing here leaks to other pages.
   Loaded LAST so its overrides win against style.css,
   design-system-compat.css and mobile-responsive.css.

   Design language: a centered cream card (--surface-card) floating
   on a rich green glass ground; Brygada 1918 serif welcome head; quiet
   small-caps labels; Golos inputs; letterpress primary button;
   honey focus + link accents. Tokens only — see design-system.css.
   ============================================================ */

/* ── THE GREEN GROUND ─────────────────────────────────────────
   The live-site green slab (style.css .ai-mode-container / farm-
   profile-v4 --fpv4-slab-bg) flattened to an opaque full-page
   ground: two radial glows + a 135° green gradient, with a faint
   cream topographic contour baked in at low alpha. Gradients only
   (no backdrop-filter) so no reduced-transparency fallback is
   needed. Fixed attachment keeps it steady behind scrolling cards. */
body.authv4 {
  min-height: 100vh;
  background-color: #264A20;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg fill='none' stroke='%23FDFBF7' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M0 280c66-40 134-40 200 0c66 40 134 40 200 0c66-40 134-40 200 0c66 40 134 40 200 0'/%3E%3Cpath d='M0 240c66 30 134 30 200 0c66-30 134-30 200 0c66 30 134 30 200 0c66-30 134-30 200 0'/%3E%3Cpath d='M0 200c66-24 134-24 200 0c66 24 134 24 200 0c66-24 134-24 200 0c66 24 134 24 200 0'/%3E%3Cpath d='M0 160c66 18 134 18 200 0c66-18 134-18 200 0c66 18 134 18 200 0c66-18 134-18 200 0'/%3E%3Cpath d='M0 120c66-13 134-13 200 0c66 13 134 13 200 0c66-13 134-13 200 0c66 13 134 13 200 0'/%3E%3Cpath d='M0 80c66 9 134 9 200 0c66-9 134-9 200 0c66 9 134 9 200 0c66-9 134-9 200 0'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 28% 18%, rgba(82, 138, 62, 0.55) 0%, transparent 52%),
    radial-gradient(circle at 74% 82%, rgba(58, 98, 46, 0.50) 0%, transparent 55%),
    linear-gradient(135deg, #264A20 0%, #386636 25%, #305926 50%, #2A5323 75%, #264A20 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 760px 380px, 140% 140%, 140% 140%, auto;
  background-position: center, left top, right bottom, center;
  background-attachment: fixed, fixed, fixed, fixed;
}
body.authv4 .topo-bg::before { display: none; }  /* green-on-green contour is redundant here */

/* ── THE CREAM CARD ───────────────────────────────────────────
   The one beautiful moment: a warm cream card lifted off the
   green ground with a soft dark-green float shadow and a light
   top edge. Overrides the compat .glass-card + the style.css
   .login-page/.register-page .glass-card fills. */
body.authv4 .glass-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-warm);
  border-radius: 18px;
  overflow: visible;
  box-shadow:
    0 44px 84px rgba(12, 30, 10, 0.44),
    0 16px 34px rgba(12, 30, 10, 0.30),
    inset 0 1px 0 rgba(253, 251, 247, 0.75),
    inset 0 -1px 0 rgba(139, 125, 107, 0.18);
}
body.authv4 .glass-card:hover {
  box-shadow:
    0 44px 84px rgba(12, 30, 10, 0.44),
    0 16px 34px rgba(12, 30, 10, 0.30),
    inset 0 1px 0 rgba(253, 251, 247, 0.75),
    inset 0 -1px 0 rgba(139, 125, 107, 0.18);
  border-color: var(--border-warm);
  transform: none;
}

/* logo: calm, framed presence — not the 200px giant */
body.authv4 .logo-login {
  height: 96px !important;
  width: auto !important;
}

/* login + register dropped their engraved vignette; the logo carries the
   header alone, so it runs larger. The .logo-container must open up with it:
   its 80px fixed height (style.css) would let taller art bleed over the
   heading, and mobile-responsive.css caps it at 52px !important on phones. */
body.authv4.login-page .logo-login,
body.authv4.register-page .logo-login {
  height: 150px !important;
  max-width: 100% !important;
}

body.authv4.login-page .logo-container,
body.authv4.register-page .logo-container {
  width: auto !important;
  height: auto !important;
  overflow: visible;
}

/* engraved vignette between logo and heading (per-page art: gate /
   seedling / mailbox / key). Soft-fading edges, sits straight on cream. */
body.authv4 .authv4-vignette {
  display: block;
  width: 130px;
  height: auto;
  margin: 10px auto -6px;
}
@media (max-width: 768px) {
  body.authv4 .authv4-vignette { width: 104px; }
}

/* honey hairline under the header block — the V4 "honey rule" accent */
body.authv4 .authv4-rule {
  width: 56px;
  height: 2px;
  background: var(--green-600);
  border: 0;
  margin: 16px auto 0;
}

/* ── TYPE — warm editorial voice on the card ──────────────────
   h1–h4 already inherit Brygada 1918 globally (style.css). Here we
   just correct the Tailwind gray/ink utilities to warm tokens.
   Semantic status colors (green/red/yellow headings on the
   success/error states) are deliberately left untouched. */
body.authv4 .glass-card h2 {
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
body.authv4 .text-gray-900 { color: var(--text-primary) !important; }
body.authv4 .text-gray-700 { color: var(--text-primary) !important; }
body.authv4 .text-gray-600 { color: var(--text-secondary) !important; }
body.authv4 .text-gray-500 { color: var(--text-muted) !important; }
body.authv4 .text-gray-400 { color: var(--text-muted) !important; }

/* brand links — quiet green with a honey underline on hover */
body.authv4 .glass-card a:not(.authv4-btn):hover {
  text-decoration: underline;
  text-decoration-color: var(--honey-500);
  text-underline-offset: 2px;
}

/* ── LABELS — quiet small-caps (Brygada 1918 600) ─────────────────
   Field labels carry the `.block` utility; the checkbox consent
   sentences do NOT — so this precisely targets field labels and
   leaves the long consent copy in the body voice. */
body.authv4 label.block {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* ── INPUTS — quiet cream fields, visible focus ───────────────
   width/flex left to the existing utilities (w-full / flex-1) so
   the verify-email inline "resend" row keeps its layout. */
body.authv4 input:not([type="checkbox"]) {
  background: var(--text-inverse);
  color: var(--text-primary);
  border: 1px solid var(--border-warm) !important;
  border-radius: var(--radius-md);
  padding: 11px 12px;
  font: 400 15px/1.4 var(--font-body);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
body.authv4 input:not([type="checkbox"])::placeholder { color: var(--text-muted); }
body.authv4 input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--green-600) !important;
  box-shadow: 0 0 0 3px rgba(71, 126, 37, 0.16);
}
/* register keeps room for the eye toggle */
body.authv4 .password-wrapper input { padding-right: 2.5rem; }

/* ── LETTERPRESS BUTTONS ──────────────────────────────────────
   Primary = green letterpress (1px darker bottom bite + resting
   lift; :active presses 1px). Ghost = warm outline. */
.authv4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green-700);
  color: var(--text-inverse) !important;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 #2D3A27, 0 1px 2px rgba(12, 30, 10, 0.28);
  transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.authv4-btn:hover { background: var(--green-600); }
.authv4-btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 #2D3A27; }
.authv4-btn--block { width: 100%; }
.authv4-btn:disabled,
.authv4-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  background: var(--green-700);
}
.authv4-btn--ghost {
  background: transparent;
  color: var(--green-700) !important;
  border: 1px solid var(--border-warm);
  box-shadow: none;
}
.authv4-btn--ghost:hover { background: var(--green-100); border-color: var(--green-600); }
.authv4-btn--ghost:active { transform: translateY(1px); }

/* ── MOBILE — 16px floor (no iOS zoom) + 44px targets ─────────── */
@media (max-width: 768px) {
  body.authv4 .glass-card { border-radius: 16px; }
  body.authv4 input:not([type="checkbox"]) { font-size: 16px; min-height: 44px; }
  .authv4-btn { min-height: 44px; }
  body.authv4 .logo-login { height: 80px !important; }
  body.authv4.login-page .logo-login,
  body.authv4.register-page .logo-login { height: 120px !important; }
}

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