/* ═══════════════════════════════════════════════════════════════
   JIFANA — shared form primitives
   ═══════════════════════════════════════════════════════════════
   These were living in jifana-auth.css, which only loads for logged-OUT
   visitors. The comment form uses the same components, so for a signed-in
   reader the inputs fell back to raw browser styling. Splitting them out is the
   fix: one definition, loaded wherever a form exists, no duplication.

   Consumes the tokens from jifana.css. Every selector is .jf-* and none of
   them appear on the homepage, so loading this everywhere changes nothing there.
   ═══════════════════════════════════════════════════════════════ */

.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-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; }


.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-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-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); }



/* ═══════════════════════════════════════════════════════════════
   AVATAR — helmet underneath, photo on top when one exists
   Shared primitive: comments, author boxes, the signed-in row. Lives here
   rather than in jifana-pages.css so it can never render unsized.
   ═══════════════════════════════════════════════════════════════ */
.jf-avatar{
  position:relative; display:inline-block; flex-shrink:0;
  width:var(--jf-avatar,52px); height:var(--jf-avatar,52px);
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(255,107,44,.22), transparent 70%), var(--ink-800);
  border:1px solid var(--ink-700);
}
.jf-avatar-fallback{ position:absolute; inset:14%; width:72%; height:72%; color:var(--ember); opacity:.85; }
.jf-avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }