/*
JIBO Signature UI — v1.0.0 (jibo-signature.css)
  v1.0.0: Single source for JIBO's signature CTA system, shared by index.html and appraise.html.
        Hallmark ingot (chamfered cast-gold plate, crosshair seal, sheen pass), ledger link
        (dotted leader + section ref), verdict line (inline domain field), assay-seal back-to-top.
  Tokens are --jb-* prefixed so they never collide with page tokens.
*/

:root{
  --jb-gold:#d4af37;
  --jb-gold-hi:#f2dc95;
  --jb-gold-deep:#a8801f;
  --jb-ink:#1a1203;
  --jb-line:#28303c;
  --jb-line-soft:#1a2028;
  --jb-ground:#080b10;
  --jb-text:#e8edf3;
  --jb-text-2:#c3ccd8;
  --jb-dim:#8b95a3;
  --jb-faint:#5b6573;
  --jb-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --jb-ease:cubic-bezier(.19,.72,.28,1);
  --jb-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.2'/%3E%3Cpath d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════
   HALLMARK INGOT — primary action
   Cast-gold plate with chamfered corners. The left cell is the
   hallmark: a crosshair seal that locks (quarter-turn) on hover.
   ═══════════════════════════════════════════════════════════ */
.jb-ingot{
  --c:10px;
  --cell:50px;
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:50px;
  padding:0 26px 0 0;
  border:0;
  cursor:pointer;
  font-family:var(--jb-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--jb-ink);
  text-decoration:none;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  background:
    linear-gradient(104deg,transparent 40%,rgba(255,251,232,.78) 50%,transparent 60%) no-repeat,
    linear-gradient(180deg,#f7e6a6 0%,#e4c464 20%,#cfa83f 50%,#ab8322 80%,#dcbd5e 100%);
  background-size:280% 100%,100% 100%;
  background-position:150% 0,0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 0 rgba(84,58,6,.48),
    inset 1px 0 0 rgba(255,244,200,.34),
    inset -1px 0 0 rgba(84,58,6,.32);
  transition:background-position 1s var(--jb-ease),filter .25s ease,transform .16s ease;
}
.jb-ingot::before{
  content:'';
  flex:none;
  width:var(--cell);
  align-self:stretch;
  margin-right:18px;
  background:var(--jb-ink);
  -webkit-mask:var(--jb-cross) center/18px 18px no-repeat;
  mask:var(--jb-cross) center/18px 18px no-repeat;
  transition:transform .55s var(--jb-ease);
}
.jb-ingot::after{
  content:'';
  position:absolute;
  left:var(--cell);
  top:9px;
  bottom:9px;
  width:2px;
  background:linear-gradient(90deg,rgba(84,58,6,.55) 0 1px,rgba(255,246,210,.55) 1px 2px);
  pointer-events:none;
}
.jb-ingot:hover,
.jb-ingot:focus-visible{
  background-position:-50% 0,0 0;
  filter:brightness(1.06) saturate(1.05);
}
.jb-ingot:hover::before,
.jb-ingot:focus-visible::before{transform:rotate(90deg)}
.jb-ingot:active{transform:translateY(1px);filter:brightness(.93)}
.jb-ingot:focus-visible{outline:2px solid var(--jb-gold-hi);outline-offset:3px}
.jb-ingot[disabled]{cursor:default;filter:saturate(.5) brightness(.8)}

.jb-ingot--sm{
  --c:7px;
  --cell:40px;
  min-height:40px;
  padding-right:18px;
  font-size:.64rem;
  letter-spacing:.15em;
}
.jb-ingot--sm::before{margin-right:14px;-webkit-mask-size:15px 15px;mask-size:15px 15px}
.jb-ingot--sm::after{top:7px;bottom:7px}

/* ═══════════════════════════════════════════════════════════
   LEDGER LINK — secondary action
   Reads like a ledger entry: label, dotted leader, reference.
   ═══════════════════════════════════════════════════════════ */
.jb-ledger{
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  width:min(100%,320px);
  padding:10px 0;
  font-family:var(--jb-mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--jb-text-2);
  text-decoration:none;
  transition:color .25s ease;
}
.jb-ledger .jb-lead{
  flex:1;
  min-width:32px;
  height:1px;
  align-self:center;
  background-image:radial-gradient(circle,var(--jb-faint) 1px,transparent 1.2px);
  background-size:6px 2px;
  background-repeat:repeat-x;
  background-position:0 50%;
  transition:background-image .25s ease;
}
.jb-ledger .jb-ref{color:var(--jb-gold-deep);letter-spacing:.1em;flex:none;transition:color .25s ease}
.jb-ledger:hover,
.jb-ledger:focus-visible{color:var(--jb-gold-hi)}
.jb-ledger:hover .jb-lead,
.jb-ledger:focus-visible .jb-lead{background-image:radial-gradient(circle,var(--jb-gold) 1px,transparent 1.2px);animation:jbLeadRun .9s linear infinite}
.jb-ledger:hover .jb-ref,
.jb-ledger:focus-visible .jb-ref{color:var(--jb-gold)}
@keyframes jbLeadRun{to{background-position:6px 50%}}

/* ═══════════════════════════════════════════════════════════
   VERDICT LINE — the domain field is the call to action
   Chamfered double plate: outer = hairline, inner = ground.
   Plain GET form to appraise.html?d=… (works with JS off).
   ═══════════════════════════════════════════════════════════ */
.jb-vline{
  --c:12px;
  display:block;
  width:100%;
  max-width:540px;
  padding:1px;
  background:var(--jb-line);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transition:background .3s ease;
}
.jb-vline:focus-within{background:linear-gradient(120deg,var(--jb-gold-deep),var(--jb-gold-hi) 50%,var(--jb-gold))}
.jb-vline-in{
  --c:11px;
  display:flex;
  align-items:stretch;
  gap:6px;
  padding:6px;
  background:linear-gradient(180deg,#0e131a,#080b10);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
}
.jb-vline-field{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:14px;
  cursor:text;
}
.jb-vline-k{
  flex:none;
  font-family:var(--jb-mono);
  font-size:.56rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--jb-faint);
  padding-right:12px;
  border-right:1px solid var(--jb-line);
  line-height:2;
}
.jb-vline input{
  flex:1;
  min-width:0;
  height:100%;
  min-height:44px;
  background:transparent;
  border:0;
  outline:0;
  color:var(--jb-text);
  font-family:var(--jb-mono);
  font-size:1.02rem;
  letter-spacing:.02em;
}
.jb-vline input::placeholder{color:var(--jb-faint)}
.jb-vline.is-empty{animation:jbNudge .38s var(--jb-ease)}
@keyframes jbNudge{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.jb-vline-note{
  margin-top:12px;
  font-family:var(--jb-mono);
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--jb-faint);
}
@media(max-width:520px){
  .jb-vline-in{flex-direction:column;gap:6px}
  .jb-vline-field{padding:4px 10px}
  .jb-vline .jb-ingot{width:100%}
}

/* ═══════════════════════════════════════════════════════════
   ASSAY SEAL — back to top
   Ring fills with read progress; caret lifts on hover.
   ═══════════════════════════════════════════════════════════ */
.jb-seal{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:80;
  width:50px;
  height:50px;
  padding:0;
  border:0;
  border-radius:50%;
  cursor:pointer;
  color:var(--jb-gold);
  background:radial-gradient(circle at 50% 38%,#151b24,#080b10 70%);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.85),0 0 0 1px rgba(212,175,55,.14);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.94);
  transition:opacity .35s var(--jb-ease),transform .35s var(--jb-ease),box-shadow .3s ease;
}
.jb-seal.show{opacity:1;pointer-events:auto;transform:none}
.jb-seal svg{width:100%;height:100%;display:block;overflow:visible}
.jb-seal-track{fill:none;stroke:var(--jb-line);stroke-width:1.5}
.jb-seal-prog{
  fill:none;
  stroke:var(--jb-gold);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:131.95;
  stroke-dashoffset:131.95;
  transform:rotate(-90deg);
  transform-origin:24px 24px;
}
.jb-seal-caret,
.jb-seal-tick{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--jb-ease)}
.jb-seal-tick{opacity:.55}
.jb-seal:hover,
.jb-seal:focus-visible{color:var(--jb-gold-hi);box-shadow:0 10px 30px -10px rgba(0,0,0,.85),0 0 0 1px rgba(212,175,55,.42),0 0 22px -4px rgba(212,175,55,.35)}
.jb-seal:hover .jb-seal-caret,
.jb-seal:focus-visible .jb-seal-caret{transform:translateY(-2.5px)}
.jb-seal:hover .jb-seal-tick,
.jb-seal:focus-visible .jb-seal-tick{transform:translateY(-1.5px)}
.jb-seal:focus-visible{outline:2px solid var(--jb-gold-hi);outline-offset:3px}

/* Compact headers: the ingot collapses to its hallmark seal (label stays for assistive tech). */
@media(max-width:400px){
  .jb-ingot--sm{padding:0;width:40px;font-size:0;letter-spacing:0}
  .jb-ingot--sm::before{margin-right:0}
  .jb-ingot--sm::after{display:none}
}

/* utility */
.jb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .jb-ingot,.jb-ingot::before,.jb-seal,.jb-seal-caret,.jb-seal-tick{transition:none}
  .jb-ingot:hover::before,.jb-ingot:focus-visible::before{transform:none}
  .jb-ledger:hover .jb-lead,.jb-ledger:focus-visible .jb-lead{animation:none}
  .jb-vline.is-empty{animation:none}
}