/* ==========================================================================
   KamiVerify — monochrome auth (sign in / sign up)
   Loaded by templates/GrowKing-2/login.twig and signup.twig
   Palette matches kpay.site. Light is the base; dark only redefines tokens.
   ========================================================================== */

:root{
  /* Declare the scheme we are painting. Without this, Chrome's "auto dark
     mode" treats a light page as un-themed and force-inverts it, which
     repaints our own dark theme back to light and wrecks the contrast. */
  color-scheme:light;
  --bg:#ffffff; --fg:#0a0a0a;
  --card:#ffffff; --muted:#f5f5f5; --muted-fg:#737373;
  --primary:#171717; --primary-fg:#fafafa;
  --border:#e5e5e5; --input:#e5e5e5; --ring:#a1a1a1;
  --ok:#0a7d55; --ok-soft:#e8f5ef;
  --wait:#8a6100; --wait-soft:#fdf3e0;
  --bad:#e40014; --bad-soft:#fdecec;
  --radius:.625rem;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a0a0a; --fg:#fafafa; --card:#171717; --muted:#262626; --muted-fg:#a1a1a1;
    --primary:#e5e5e5; --primary-fg:#171717;
    --border:rgba(255,255,255,.10); --input:rgba(255,255,255,.15); --ring:#737373;
    --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.14);
    --wait:#f9c04a; --wait-soft:rgba(249,192,74,.14);
    --bad:#ff6568; --bad-soft:rgba(255,101,104,.14);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a0a0a; --fg:#fafafa; --card:#171717; --muted:#262626; --muted-fg:#a1a1a1;
  --primary:#e5e5e5; --primary-fg:#171717;
  --border:rgba(255,255,255,.10); --input:rgba(255,255,255,.15); --ring:#737373;
  --ok:#3ddc9a; --ok-soft:rgba(61,220,154,.14);
  --wait:#f9c04a; --wait-soft:rgba(249,192,74,.14);
  --bad:#ff6568; --bad-soft:rgba(255,101,104,.14);
}

*,*::before,*::after{box-sizing:border-box}
body.kv-auth-page{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;
}
.kv-auth-page h1,.kv-auth-page h2{margin:0;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.kv-auth-page p{margin:0}
.kv-auth-page a{color:inherit}
/* font only — never colour. A scoped `color:inherit` here outranks the
   component classes below (0,1,1 beats 0,1,0) and would repaint every
   button with the page text colour. Components own their own colour. */
.kv-auth-page button,.kv-auth-page input,.kv-auth-page label{font:inherit}
.kv-auth-page input{color:var(--fg)}
.kv-auth-page label{color:inherit}
.kv-auth-page :focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){.kv-auth-page *{animation:none!important;transition:none!important}}

/* ---------- header ---------- */
.kv-auth-header{display:flex;align-items:center;gap:1rem;padding:.75rem clamp(1rem,4vw,2rem);border-bottom:1px solid var(--border)}
.kv-auth-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.kv-auth-brand-mark{width:28px;height:28px;flex:none;border-radius:7px;background:var(--primary);color:var(--primary-fg);display:grid;place-items:center;font-size:.75rem;font-weight:800;letter-spacing:-.06em}
.kv-auth-brand-copy{display:flex;flex-direction:column;line-height:1.1}
.kv-auth-brand-copy b{font-size:1.0625rem;letter-spacing:-.035em}
.kv-auth-brand-copy small{font-size:.625rem;color:var(--muted-fg)}
.kv-auth-spacer{flex:1}
.kv-auth-page .kv-auth-back{font-size:.8125rem;color:var(--muted-fg);text-decoration:none}
.kv-auth-page .kv-auth-back:hover{color:var(--fg)}

/* ---------- language + theme dropdown ---------- */
.kv-menu{position:relative;flex:none}
.kv-prefbtn{display:inline-flex;align-items:center;gap:.3125rem;padding:.375rem .5rem .375rem .5625rem;border:1px solid var(--border);border-radius:999px;background:var(--muted);color:var(--fg);cursor:pointer;font-family:var(--mono);font-size:.6875rem;font-weight:800;letter-spacing:.04em}
.kv-prefbtn:hover{background:var(--card)}
.kv-prefbtn .glyph{width:15px;height:15px;display:block}
.kv-prefbtn .caret{width:9px;height:9px;opacity:.5}
.kv-pop{position:absolute;right:0;top:calc(100% + .5rem);min-width:190px;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.375rem;box-shadow:0 12px 34px rgba(0,0,0,.16)}
.kv-pop[hidden]{display:none}
.kv-popgrp{display:flex;flex-direction:column}
.kv-popgrp + .kv-popgrp{margin-top:.25rem;padding-top:.3125rem;border-top:1px solid var(--border)}
.kv-poplabel{font-size:.625rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:var(--muted-fg);font-family:var(--mono);padding:.375rem .625rem .25rem}
.kv-popitem{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;border:0;border-radius:7px;background:transparent;color:var(--fg);cursor:pointer;font-size:.875rem;text-align:left}
.kv-popitem:hover{background:var(--muted)}
.kv-popitem .ic{width:15px;height:15px;flex:none;color:var(--muted-fg)}
.kv-popitem .ck{margin-left:auto;width:15px;height:15px;flex:none;opacity:0}
.kv-popitem[aria-checked="true"]{font-weight:600}
.kv-popitem[aria-checked="true"] .ck{opacity:1}

/* ---------- split shell ---------- */
.kv-auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kv-aside{border-right:1px solid var(--border);padding:clamp(2rem,5vw,4rem);display:flex;flex-direction:column;justify-content:center;gap:2rem;background:var(--muted)}
.kv-aside h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.04em;max-width:16ch}
.kv-aside .sub{color:var(--muted-fg);max-width:38ch;margin-top:.875rem}
.kv-eyebrow{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted-fg);font-family:var(--mono)}

.kv-proof{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden;max-width:360px}
.kv-proof .row{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;border-bottom:1px solid var(--border)}
.kv-proof .row:last-child{border-bottom:0}
.kv-avatar{width:32px;height:32px;flex:none;border-radius:8px;background:var(--muted);border:1px solid var(--border);display:grid;place-items:center;font-size:.6875rem;font-weight:700;color:var(--muted-fg)}
.kv-proof .b{flex:1;min-width:0;display:flex;flex-direction:column}
.kv-proof .n{font-size:.8125rem;font-weight:600}
.kv-proof .m{font-size:.75rem;color:var(--muted-fg);font-family:var(--mono);font-variant-numeric:tabular-nums}
.kv-codebox{padding:.875rem;background:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kv-codebox .d{font-family:var(--mono);font-size:1.375rem;font-weight:700;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.kv-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.6875rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.kv-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.kv-pill.ok{color:var(--ok);background:var(--ok-soft)}
.kv-pill.wait{color:var(--wait);background:var(--wait-soft)}
.kv-tick{display:flex;gap:.625rem;font-size:.875rem;color:var(--muted-fg)}
.kv-tick svg{width:16px;height:16px;flex:none;margin-top:.2rem;color:var(--fg)}

.kv-pane{display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,4vw,3rem)}
.auth-card{width:100%;max-width:400px}
.auth-card > h2{font-size:1.5rem;letter-spacing:-.035em}
.auth-card > .lede{color:var(--muted-fg);font-size:.9375rem;margin-top:.375rem}

/* ---------- tabs (real links) ---------- */
.kv-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;background:var(--muted);border:1px solid var(--border);border-radius:999px;margin:1.5rem 0}
.kv-auth-tabs a{padding:.5rem;border-radius:999px;text-align:center;text-decoration:none;color:var(--muted-fg);font-size:.875rem;font-weight:600;transition:background .16s,color .16s}
.kv-auth-tabs a.active{background:var(--card);color:var(--fg)}
.kv-auth-tabs a:not(.active):hover{color:var(--fg)}

/* ---------- google + divider ---------- */
.kv-auth-page .google-button{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;padding:.6875rem;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--fg);font-size:.875rem;font-weight:600;cursor:pointer;text-decoration:none}
.kv-auth-page .google-button:hover{background:var(--muted)}
.google-button svg{width:17px;height:17px}
.divider{display:flex;align-items:center;gap:.75rem;margin:1.125rem 0;color:var(--muted-fg);font-size:.75rem}
.divider::before,.divider::after{content:"";height:1px;background:var(--border);flex:1}

/* ---------- form ---------- */
.kv-auth-page form{display:flex;flex-direction:column;gap:.875rem}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-label{font-size:.8125rem;font-weight:600}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap svg.input-icon{position:absolute;left:.75rem;width:15px;height:15px;color:var(--muted-fg);pointer-events:none}
.input-wrap input{width:100%;padding:.6875rem .75rem .6875rem 2.25rem;background:var(--card);color:var(--fg);border:1px solid var(--input);border-radius:9px}
.input-wrap input::placeholder{color:var(--muted-fg)}
.input-wrap input:focus{border-color:var(--ring);outline:none}
.input-wrap.input-error input,.input-wrap input.input-error{border-color:var(--bad)}
.toggle-password{position:absolute;right:.5rem;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted-fg);cursor:pointer}
.toggle-password:hover{background:var(--muted)}
.toggle-password svg{width:16px;height:16px}

.strength-wrap{margin-top:.5rem}
.strength-bar-bg{display:flex;gap:4px}
.strength-bar-bg i{height:3px;flex:1;border-radius:2px;background:var(--border);transition:background .18s}
.strength-text{font-size:.75rem;margin-top:.375rem;color:var(--muted-fg);font-family:var(--mono)}

.input-error-msg,.input-ok-msg{font-size:.75rem;display:none;align-items:center;gap:.375rem;margin-top:.25rem}
.input-error-msg.show,.input-ok-msg.show{display:flex}
.input-error-msg{color:var(--bad)}
.input-ok-msg{color:var(--ok)}
.input-error-msg svg,.input-ok-msg svg{width:13px;height:13px}

.forgot-row{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;gap:1rem}
.forgot-row a{color:var(--muted-fg);text-decoration:none}
.forgot-row a:hover{color:var(--fg);text-decoration:underline}

.terms-check{display:flex;gap:.625rem;align-items:flex-start;font-size:.8125rem;color:var(--muted-fg)}
.terms-check input{width:16px;height:16px;margin-top:.15rem;accent-color:var(--fg);flex:none}
.terms-check a{color:var(--fg)}
.remember-check{display:flex;gap:.5rem;align-items:center;color:var(--muted-fg)}
.remember-check input{width:16px;height:16px;accent-color:var(--fg);flex:none}

/* Two classes deep on purpose. The submit button is the one control that
   must never inherit the page text colour — on --primary it would be
   light-on-light in dark mode and dark-on-dark in light mode. Colour is
   restated on the children so nothing between can reintroduce inherit. */
.kv-auth-page .primary-button{
  width:100%;padding:.75rem;border:0;border-radius:9px;
  background:var(--primary);color:var(--primary-fg);
  font-size:.9375rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.kv-auth-page .primary-button span,
.kv-auth-page .primary-button svg{color:var(--primary-fg)}
.kv-auth-page .primary-button svg{width:16px;height:16px;stroke:currentColor}
.kv-auth-page .primary-button:hover{opacity:.88}
.kv-auth-page .primary-button:disabled{opacity:.5;cursor:not-allowed}

.alert{display:flex;gap:.625rem;padding:.6875rem .875rem;border-radius:9px;font-size:.8125rem;border:1px solid transparent;margin-bottom:1rem}
.alert svg{width:16px;height:16px;flex:none;margin-top:.1rem}
.alert-danger{color:var(--bad);background:var(--bad-soft);border-color:var(--bad)}
.alert-success{color:var(--ok);background:var(--ok-soft);border-color:var(--ok)}

.switch-copy{margin-top:1.125rem;font-size:.8125rem;color:var(--muted-fg);text-align:center}
.switch-copy button{border:0;background:transparent;color:var(--fg);font-weight:600;cursor:pointer;text-decoration:underline;padding:0}
.auth-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1rem;font-size:.75rem;color:var(--muted-fg);flex-wrap:wrap}
.auth-footer a{color:var(--muted-fg)}

/* recaptcha sits in the flow, not floating */
.g-recaptcha{margin:.25rem 0}

@media (max-width:900px){
  .kv-auth-main{grid-template-columns:minmax(0,1fr)}
  .kv-aside{display:none}
}
@media (max-width:480px){
  .kv-auth-header{gap:.5rem}
  .kv-auth-brand-copy small{display:none}
  .kv-auth-back{display:none}
}