/* The merchant sign-in surfaces: sign in, create an account, recover a password, verify an email.
 *
 * Deliberately separate from app.css. These pages are the front door, not the workspace: they carry
 * their own identity, they must not inherit whatever the merchant sheet is doing this week, and a shop
 * owner arriving here should not download 56KB of dashboard styling to see one form.
 *
 * Cinematic, and it works in two lights. Dark is the base — a lit void with volumetric glows and film
 * grain behind a glass panel. The light build keeps every structure and swaps the tokens: a warm cream
 * room, a frosted white panel, the same gold action. `data-theme="light"` on <body> is the only thing
 * that switches it, so the choice is one attribute in one place, and no JavaScript at all is needed for
 * dark. The theme preference lives in config/auth.php (auto | dark | light).
 */

/* The MiniStore brand face, self-hosted like the others. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/geist-variable.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens · dark (base) --- */
.auth-body{
  --a-bg:#0e0f11; --a-bg-2:#16181b; --a-void:#08090a;
  --a-text:#ffffff; --a-muted:rgba(255,255,255,.68); --a-label:rgba(255,255,255,.70);
  --a-line:rgba(255,255,255,.13); --a-line-strong:rgba(255,255,255,.22);
  --a-field:rgba(255,255,255,.055); --a-field-focus:rgba(255,255,255,.08);
  --a-panel:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.028) 46%,rgba(255,255,255,.05));
  --a-panel-line:rgba(255,255,255,.13); --a-panel-hi:rgba(255,255,255,.22);
  --a-panel-shadow:0 44px 90px -34px rgba(0,0,0,.85);
  --a-glow-1:rgba(255,91,31,.30); --a-glow-2:rgba(194,58,10,.28); --a-glow-3:rgba(246,245,241,.06);
  --a-grain:.30; --a-beam:rgba(255,91,31,.10);
  --a-gold:#ff5b1f; --a-gold-lt:#ff8a5b; --a-ink-on-gold:#0e0f11;
  --a-ring:rgba(255,91,31,.55); --a-ring-soft:rgba(255,91,31,.14);
  --a-jade:#2f7a55; --a-jade-lt:#4fbf85;
  --a-danger:#ff9d8c; --a-danger-line:rgba(255,90,70,.65); --a-danger-bg:linear-gradient(150deg,rgba(255,90,70,.16),rgba(255,90,70,.06));
  --a-good:#c6f3dd; --a-good-line:rgba(79,191,133,.34); --a-good-bg:linear-gradient(150deg,rgba(79,191,133,.16),rgba(79,191,133,.05));
  --a-ghost-bg:rgba(255,255,255,.045); --a-ghost-hover:rgba(255,255,255,.09);
  --a-chip-bg:rgba(255,255,255,.055); --a-chip-line:rgba(255,255,255,.12);
  color-scheme:dark;
}

/* --------------------------------------------------------------- tokens · light (opt-in) --- */
.auth-body[data-theme="light"]{
  --a-bg:#f6f5f1; --a-bg-2:#edece7; --a-void:#edece7;
  --a-text:#0e0f11; --a-muted:#4a4f57; --a-label:#2e3238;
  --a-line:rgba(14,15,17,.14); --a-line-strong:rgba(14,15,17,.26);
  --a-field:rgba(255,255,255,.72); --a-field-focus:#fff;
  --a-panel:linear-gradient(158deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  --a-panel-line:rgba(14,15,17,.10); --a-panel-hi:rgba(255,255,255,.9);
  --a-panel-shadow:0 34px 70px -30px rgba(14,15,17,.24);
  --a-glow-1:rgba(255,91,31,.16); --a-glow-2:rgba(194,58,10,.10); --a-glow-3:rgba(255,255,255,.5);
  --a-grain:.12; --a-beam:rgba(255,91,31,.08);
  --a-ring:rgba(194,58,10,.55); --a-ring-soft:rgba(255,91,31,.16);
  --a-danger:#8c2b1c; --a-danger-line:rgba(217,45,32,.55); --a-danger-bg:linear-gradient(150deg,rgba(217,45,32,.09),rgba(217,45,32,.03));
  --a-good:#14603f; --a-good-line:rgba(22,121,75,.34); --a-good-bg:linear-gradient(150deg,rgba(22,121,75,.10),rgba(22,121,75,.03));
  --a-ghost-bg:rgba(255,255,255,.6); --a-ghost-hover:#fff;
  --a-chip-bg:rgba(255,255,255,.6); --a-chip-line:rgba(14,15,17,.12);
  color-scheme:light;
}

/* ------------------------------------------------------------------------------ reset --- */
*,*::before,*::after{box-sizing:border-box}
.auth-body{margin:0;min-height:100vh;background:var(--a-bg);color:var(--a-text);
  font-family:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;font-synthesis:none}
.auth-body a{color:var(--a-gold-lt)}
.auth-body[data-theme="light"] a{color:#c23a0a}
.auth-body a:hover{text-decoration:underline}

/* ------------------------------------------------------------------------ the scene --- */
.auth-scene{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:96px 22px 88px}
.auth-scene::before{content:"";position:absolute;inset:-20%;z-index:-2;
  background:
    radial-gradient(46% 40% at 22% 18%,var(--a-glow-1),transparent 62%),
    radial-gradient(38% 34% at 82% 74%,var(--a-glow-2),transparent 64%),
    radial-gradient(70% 60% at 50% 120%,var(--a-glow-3),transparent 70%),
    linear-gradient(160deg,var(--a-bg-2),var(--a-bg) 58%,var(--a-void))}
/* Film grain. Not decoration: a perfectly flat dark surface is what makes a page look generated. */
.auth-scene::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  opacity:var(--a-grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>")}
.auth-beam{position:absolute;z-index:-1;top:-38%;left:50%;width:min(1100px,120vw);height:120%;
  transform:translateX(-50%) rotate(8deg);filter:blur(38px);
  background:linear-gradient(180deg,var(--a-beam),transparent 62%)}

/* ------------------------------------------------------------------ frame furniture --- */
.auth-bar{position:absolute;z-index:6;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 clamp(18px,4vw,44px)}
.auth-bar--top{top:0;min-height:76px}
.auth-bar--bottom{bottom:0;min-height:64px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a-muted)}
.auth-lockup{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.auth-lockup:hover{text-decoration:none}
.auth-body .auth-lockup{color:var(--a-text)}
.auth-mark{display:block;flex:none;line-height:0}
.auth-mark img{display:block;width:57px;height:auto}
.auth-mark .on-light{display:none}
.auth-body[data-theme="light"] .auth-mark .on-dark{display:none}
.auth-body[data-theme="light"] .auth-mark .on-light{display:block}
/* Same pattern as the super-admin header: the full logo, a hairline, then which area this is. */
.auth-area{padding-left:12px;border-left:1px solid var(--a-line,rgba(128,128,128,.35));font-family:Geist,system-ui,sans-serif;
  font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--a-muted);line-height:1.6}

.auth-bar--top nav{display:flex;align-items:center;gap:14px;font-size:.86rem}
.auth-bar--top nav a,.auth-bar--top nav button{color:var(--a-muted);font:inherit;font-size:.86rem;font-weight:700;text-decoration:none;background:none;border:0;cursor:pointer;padding:0}
.auth-bar--top nav a:hover,.auth-bar--top nav button:hover{color:var(--a-text)}

/* ---------------------------------------------------------------------- the panel --- */
.auth-panel{position:relative;width:100%;max-width:452px;border-radius:26px;padding:clamp(26px,4.4vw,38px);
  background:var(--a-panel);border:1px solid var(--a-panel-line);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:var(--a-panel-shadow),inset 0 1px 0 var(--a-panel-hi);
  animation:auth-rise .85s cubic-bezier(.16,.84,.24,1) both}
.auth-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -20%,var(--a-panel-hi),transparent 60%)}
@keyframes auth-rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

.auth-eyebrow{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--a-gold-lt)}
.auth-body[data-theme="light"] .auth-eyebrow{color:#c23a0a}
.auth-eyebrow i{display:block;width:34px;height:1px;background:linear-gradient(90deg,var(--a-gold),transparent)}
.auth-panel h1{position:relative;font-family:Geist,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(2rem,4.2vw,2.75rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.auth-panel h1 em{font-style:normal;color:var(--a-gold-lt)}
.auth-body[data-theme="light"] .auth-panel h1 em{color:#c23a0a}
.auth-sub{position:relative;color:var(--a-muted);font-size:.95rem;line-height:1.62;margin:0 0 26px;max-width:42ch}
.auth-form{position:relative;margin:0}
.auth-steps{display:flex;align-items:center;gap:9px;margin:0 0 22px;font-size:.66rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--a-muted)}
.auth-steps .is-now{color:var(--a-jade-lt)}
.auth-steps em{font-style:normal;opacity:.4}

/* -------------------------------------------------------------------------- fields --- */
.afield{margin-bottom:16px}
.afield label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--a-label);margin-bottom:8px}
.afield .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.afield .row a{font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:none}
.ainput{position:relative;display:flex;align-items:center;border-radius:15px;background:var(--a-field);
  border:1px solid var(--a-line);box-shadow:inset 0 1px 0 var(--a-panel-hi);
  transition:border-color .2s,box-shadow .2s,background .2s}
.ainput:focus-within{border-color:var(--a-gold);background:var(--a-field-focus);
  box-shadow:0 0 0 4px var(--a-ring-soft),inset 0 1px 0 var(--a-panel-hi)}
.ainput input{flex:1;min-width:0;height:56px;border:0;background:transparent;color:var(--a-text);
  font:inherit;font-size:.98rem;padding:0 15px}
.ainput input:focus{outline:none}
.ainput input::placeholder{color:var(--a-muted);opacity:.7}
.apeek{border:0;background:transparent;color:var(--a-muted);font:inherit;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:0 15px;height:56px;cursor:pointer;flex:none}
.apeek:hover{color:var(--a-gold-lt)}
.afield.is-invalid .ainput{border-color:var(--a-danger-line);box-shadow:0 0 0 4px rgba(255,90,70,.12)}
.afield.is-invalid label{color:var(--a-danger)}
.aerror,.ahint{display:flex;gap:8px;align-items:flex-start;margin:9px 0 0;font-size:.8rem;line-height:1.5}
.aerror{color:var(--a-danger);font-weight:600}
.ahint{color:var(--a-muted)}
.acaps{margin-left:auto;margin-right:12px;padding:4px 9px;border-radius:999px;font-size:.6rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--a-gold-lt);
  background:rgba(255,91,31,.14);border:1px solid rgba(255,91,31,.34)}
.acaps[hidden]{display:none}

/* the 12-character rule, as live ticks */
.arules{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;font-size:.79rem;color:var(--a-muted)}
.arules li{display:flex;align-items:center;gap:9px}
.arules li.is-met{color:var(--a-text)}
.amark-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
.arules li.is-met .amark-dot{opacity:1;background:var(--a-jade-lt)}
.ameter{display:flex;gap:6px;margin-top:12px}
.ameter i{flex:1;height:5px;border-radius:99px;background:var(--a-line);transition:background .3s}
.ameter i.is-on{background:linear-gradient(90deg,var(--a-gold-lt),var(--a-jade-lt));box-shadow:0 0 12px -2px rgba(79,191,133,.6)}

/* ------------------------------------------------------------------------- actions --- */
.acta{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:58px;
  border:0;cursor:pointer;overflow:hidden;border-radius:999px;font:inherit;font-size:1rem;font-weight:800;
  color:var(--a-ink-on-gold);
  background:linear-gradient(100deg,#ff8a5b 0%,#ff6a30 30%,#ff5b1f 62%,#e8480f 100%);
  box-shadow:0 18px 40px -16px rgba(255,91,31,.7),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.16);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,filter .22s}
.acta .lbl,.acta .arw{position:relative;z-index:2}
.acta .arw{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
/* the light sweep: the difference between a pill and a moment */
.acta::after{content:"";position:absolute;z-index:1;top:-60%;bottom:-60%;width:44%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:translateX(-160%) rotate(8deg)}
.acta:hover{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 24px 54px -18px rgba(255,91,31,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.acta:hover::after{transform:translateX(320%) rotate(8deg);transition:transform .85s cubic-bezier(.2,.7,.2,1)}
.acta:hover .arw{transform:translateX(5px)}
.acta:active{transform:translateY(0) scale(.99)}
.acta:focus-visible{outline:3px solid var(--a-ring);outline-offset:3px}
.acta[aria-busy="true"]{cursor:progress;color:rgba(14,15,17,.75)}
.acta .aspin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(14,15,17,.28);border-top-color:#0e0f11;
  position:relative;z-index:2;animation:auth-spin .8s linear infinite}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.aghost{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin-top:12px;
  border-radius:999px;cursor:pointer;font:inherit;font-size:.94rem;font-weight:700;text-decoration:none;
  background:var(--a-ghost-bg);border:1px solid var(--a-line-strong);color:var(--a-text);
  transition:background .2s,border-color .2s,transform .2s}
.aghost:hover{background:var(--a-ghost-hover);border-color:var(--a-line-strong);transform:translateY(-1px);text-decoration:none}

/* There is deliberately no "keep me signed in" control: the session has no remember-me lifetime, and a
   checkbox that does nothing is worse than no checkbox. It joins the page with the feature. */

/* -------------------------------------------------------------------------- notices --- */
.anotice{position:relative;display:flex;gap:11px;align-items:flex-start;margin:0 0 20px;padding:14px 16px;
  border-radius:15px;font-size:.86rem;font-weight:600;line-height:1.55}
.anotice--error{background:var(--a-danger-bg);border:1px solid var(--a-danger-line);color:var(--a-danger)}
.anotice--success{background:var(--a-good-bg);border:1px solid var(--a-good-line);color:var(--a-good)}
.anotice .ic{font-weight:900;flex:none}
.anotice a{color:inherit;font-weight:800}

/* --------------------------------------------------------------------- closing lines --- */
.afine{position:relative;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--a-line);
  color:var(--a-muted);font-size:.78rem;line-height:1.6}
.achips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.achips span{padding:7px 12px;border-radius:999px;font-size:.7rem;font-weight:700;color:var(--a-muted);
  background:var(--a-chip-bg);border:1px solid var(--a-chip-line)}
.aswitch{position:relative;margin:20px 0 0;text-align:center;font-size:.9rem;color:var(--a-muted)}
.aswitch a{font-weight:800}
.adevnote{position:relative;margin:18px 0 0;padding:12px 14px;border-radius:12px;font-size:.76rem;line-height:1.55;
  color:var(--a-muted);background:var(--a-chip-bg);border:1px dashed var(--a-chip-line)}
.adevnote code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem}

/* ----------------------------------------------------------------------------- phone --- */
@media(max-width:560px){
  .auth-scene{padding:84px 16px 30px;align-items:start}
  .auth-bar--bottom{display:none}
  .auth-bar--top{min-height:68px;padding:0 16px}
  .auth-panel{width:100%;border-radius:22px;padding:24px 20px 26px}
  .auth-panel h1{font-size:1.9rem}
  .acta{min-height:56px}
  .achips span{font-size:.66rem;padding:6px 10px}
}

/* Motion and forced colours: never animate for someone who asked us not to, and keep the edges
   visible when the system replaces our palette. */
@media(prefers-reduced-motion:reduce){
  .auth-panel{animation:none}
  .acta,.acta::after,.acta .arw,.aghost,.ameter i{transition:none}
  .acta .aspin{animation-duration:2s}
}
@media(forced-colors:active){
  .auth-panel,.ainput,.acta,.aghost,.anotice{border:1px solid CanvasText}
  .auth-scene::after{display:none}
}