/* ═══════════════════════════════════════════════════════════════
   JIFANA — authentication lightbox
   Consumes the tokens already declared in jifana.css (:root). Nothing is
   re-declared here: same palette, same type stack, same radii, same easing.
   jifana.css is never touched, so the homepage audit stays valid.
   ═══════════════════════════════════════════════════════════════ */

.jf-auth{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:32px 22px;
  opacity:0; visibility:hidden;
  transition:opacity .26s var(--ease), visibility .26s var(--ease);
}
.jf-auth[hidden]{ display:none; }
.jf-auth.is-open{ opacity:1; visibility:visible; }

.jf-auth-veil{
  position:absolute; inset:0;
  background:rgba(6,5,12,.78);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}

/* ── panel ─────────────────────────────────────────────────── */
.jf-auth-panel{
  position:relative; z-index:1;
  display:grid; grid-template-columns:41% 59%;
  width:100%; max-width:940px; max-height:calc(100vh - 64px);
  background:var(--ink-850);
  border:1px solid var(--ink-700);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 60px 130px -40px rgba(0,0,0,.92), 0 0 0 1px rgba(255,107,44,.06);
  transform:translateY(18px) scale(.985);
  opacity:0;
  transition:transform .42s var(--ease), opacity .32s var(--ease);
}
.jf-auth.is-open .jf-auth-panel{ transform:none; opacity:1; }

/* same film grain the page carries, so the dialog is not "cleaner" than the site */
.jf-auth-panel::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── close ─────────────────────────────────────────────────── */
.jf-auth-x{
  position:absolute; top:16px; right:16px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--bone-muted);
  background:rgba(12,10,20,.55); border:1px solid var(--ink-700);
  backdrop-filter:blur(8px);
  transition:color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.jf-auth-x svg{ width:17px; height:17px; }
.jf-auth-x:hover{ color:var(--bone); border-color:var(--bone-muted); transform:rotate(90deg); }

/* ── cinematic side panel ──────────────────────────────────── */
.jf-auth-art{ position:relative; overflow:hidden; background:var(--void); min-height:520px; }
.jf-auth-scene{ position:absolute; inset:0; width:100%; height:100%; }
.jf-auth-art::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,7,17,.94) 1%, rgba(8,7,17,.4) 22%, rgba(8,7,17,.06) 48%, transparent 68%);
}
.jf-auth-art-copy{ position:absolute; left:28px; right:28px; bottom:26px; z-index:2; }
.jf-auth-logo{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.jf-auth-logo svg{ width:26px; height:26px; color:var(--ember); flex-shrink:0; }
.jf-auth-logo b{
  font-family:var(--f-display); font-weight:400; font-size:1.32rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bone); line-height:1; padding-top:3px;
}
.jf-auth-quote{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin:0; line-height:1.7;
}

/* ── form side ─────────────────────────────────────────────── */
.jf-auth-body{ position:relative; padding:46px 46px 40px; overflow-y:auto; }
.jf-view{ display:none; }
.jf-view.is-active{ display:block; animation:jfIn .34s var(--ease) both; }
@keyframes jfIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.jf-kicker{
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin-bottom:14px;
}
.jf-kicker::before{ content:''; width:28px; height:1px; background:var(--ember); opacity:.6; }
.jf-title{
  font-family:var(--f-display); font-weight:400; line-height:1.04; letter-spacing:-.015em;
  font-size:clamp(1.9rem,2.6vw,2.5rem); color:var(--bone); margin:0 0 10px;
}
.jf-sub{ color:var(--bone-muted); font-size:.95rem; line-height:1.6; margin:0 0 26px; }

.jf-form{ display:flex; flex-direction:column; gap:15px; }

.jf-field{ position:relative; display:block; }
.jf-field > span{
  display:block; margin-bottom:7px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-500);
}
.jf-field input{
  width:100%; padding:13px 15px;
  font-family:var(--f-ui); font-size:.94rem; color:var(--bone);
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-sm);
  transition:border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.jf-field input::placeholder{ color:var(--ink-500); }
.jf-field input:focus{
  outline:none; border-color:var(--ember); background:var(--ink-850);
  box-shadow:0 0 0 3px rgba(255,107,44,.14);
}
.jf-field.has-error input{ border-color:#E0685A; box-shadow:0 0 0 3px rgba(224,104,90,.13); }
.jf-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 40px var(--ink-900) inset;
}

.jf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.jf-peek{
  position:absolute; right:9px; bottom:7px;
  width:34px; height:34px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-500); transition:color .2s var(--ease);
}
.jf-peek:hover{ color:var(--bone-muted); }
.jf-peek svg{ width:17px; height:17px; }

/* password strength — three ember steps, no traffic-light colours */
/* hidden until the field is actually used, otherwise it reads as a stray rule */
.jf-meter{ height:3px; border-radius:2px; background:var(--ink-700); overflow:hidden; margin-top:-4px;
  opacity:0; transition:opacity .28s var(--ease); }
.jf-meter.is-live{ opacity:1; }
.jf-meter u{ display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--ember),var(--gold));
  transition:width .32s var(--ease); }

.jf-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

.jf-check{ position:relative; display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:.86rem; color:var(--bone-muted); }
/* the native input keeps its real size and sits exactly over the drawn box:
   invisible, but still a genuine hit target and focus target */
.jf-check input{ position:absolute; left:0; top:1px; width:17px; height:17px;
  margin:0; opacity:0; cursor:pointer; z-index:1; }
.jf-check i{
  flex-shrink:0; width:17px; height:17px; margin-top:1px; border-radius:5px;
  border:1px solid var(--ink-600); background:var(--ink-900);
  display:block; position:relative;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.jf-check i::after{
  content:''; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:solid var(--ink-900); border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .2s var(--ease);
}
.jf-check input:checked + i{ background:var(--ember); border-color:var(--ember); }
.jf-check input:checked + i::after{ transform:rotate(45deg) scale(1); }
.jf-check input:focus-visible + i{ box-shadow:0 0 0 3px rgba(255,107,44,.2); }
.jf-check-terms{ margin-top:2px; line-height:1.5; }
.jf-check-terms a{ color:var(--bone-dim); text-decoration:underline; text-underline-offset:2px; }
.jf-check-terms a:hover{ color:var(--ember); }
.jf-check.has-error i{ border-color:#E0685A; }

.jf-link{
  font-family:var(--f-ui); font-size:.86rem; font-weight:500; color:var(--ember);
  padding:0; transition:color .2s var(--ease);
}
.jf-link:hover{ color:var(--ember-soft); text-decoration:underline; text-underline-offset:3px; }

.jf-submit{ width:100%; margin-top:6px; position:relative; }
.jf-submit[disabled]{ opacity:.62; pointer-events:none; }
.jf-submit.is-busy span{ opacity:0; }
.jf-submit.is-busy::after{
  content:''; position:absolute; top:50%; left:50%; width:17px; height:17px; margin:-9px 0 0 -9px;
  border:2px solid rgba(21,12,6,.35); border-top-color:#150C06; border-radius:50%;
  animation:jfSpin .62s linear infinite;
}
@keyframes jfSpin{ to{ transform:rotate(360deg); } }

.jf-msg{
  display:none; padding:12px 15px; border-radius:var(--r-sm);
  font-size:.86rem; line-height:1.5;
  border:1px solid var(--ink-700); background:var(--ink-900); color:var(--bone-dim);
}
.jf-msg.is-shown{ display:block; animation:jfIn .26s var(--ease) both; }
.jf-msg.is-error{ border-color:rgba(224,104,90,.5); background:rgba(224,104,90,.09); color:#F2B3AA; }
.jf-msg.is-ok{ border-color:rgba(95,227,200,.45); background:rgba(95,227,200,.08); color:var(--arcane); }

.jf-alt{ margin:22px 0 0; font-size:.88rem; color:var(--bone-muted); }
.jf-alt .jf-link{ margin-left:2px; }

body.jf-locked{ overflow:hidden; }

/* ── tablet ────────────────────────────────────────────────── */
@media (max-width:900px){
  .jf-auth-panel{ grid-template-columns:36% 64%; max-width:760px; }
  .jf-auth-body{ padding:40px 34px 34px; }
}

/* ── mobile: the art becomes a banner, not a squeezed column ── */
@media (max-width:720px){
  .jf-auth{ padding:0; align-items:flex-end; }
  .jf-auth-panel{
    grid-template-columns:1fr;
    max-width:none; max-height:94vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-bottom:none;
    transform:translateY(28px);
  }
  .jf-auth-art{ min-height:0; height:136px; }
  /* the crop itself is reframed via preserveAspectRatio in JS — object-fit does
     nothing to an inline <svg>, so it must be the SVG attribute, not CSS */
  .jf-auth-art::after{
    background:linear-gradient(0deg, rgba(22,18,33,.96) 2%, rgba(8,7,17,.3) 60%, transparent 100%);
  }
  .jf-auth-art-copy{ left:24px; right:24px; bottom:14px; display:flex;
    align-items:baseline; justify-content:space-between; gap:14px; }
  .jf-auth-logo{ margin-bottom:0; }
  .jf-auth-quote{ font-size:.56rem; letter-spacing:.13em; text-align:right; }
  .jf-auth-body{ padding:28px 24px 34px; }
  .jf-title{ font-size:1.75rem; }
  .jf-sub{ font-size:.9rem; margin-bottom:22px; }
  .jf-auth-x{ top:12px; right:12px; width:34px; height:34px; }
}

@media (max-width:400px){
  .jf-grid2{ grid-template-columns:1fr; }
  .jf-auth-quote{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .jf-auth,.jf-auth-panel,.jf-view,.jf-msg{ transition:none; animation:none; }
  .jf-submit.is-busy::after{ animation:none; }
}