/* Fox Auth — shared components */

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;
  min-height:44px;padding:11px 22px;border-radius:var(--r-btn);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s var(--ease-out),color .15s,border-color .15s,transform .12s,box-shadow .15s;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad);color:#fff;       /* gradient orange + white text, matching the mockup */
  box-shadow:0 1px 2px rgba(232,82,28,.35), 0 8px 20px rgba(232,82,28,.22);
  text-shadow:0 1px 1px rgba(150,40,0,.25)}
.btn--primary:hover{background:var(--grad-h)}
.btn--secondary{background:transparent;color:var(--midnight);box-shadow:inset 0 0 0 1.5px var(--midnight)}
.btn--secondary:hover{background:var(--midnight);color:var(--belly)}
.btn--tertiary{background:transparent;color:var(--midnight);min-height:auto;padding:8px 6px}
.btn--tertiary:hover{color:var(--ember)}
.btn--lg{font-size:1.0625rem;padding:14px 26px;min-height:50px}
.btn--block{width:100%}
/* on dark surfaces (S7) */
.btn--outline-light{background:transparent;color:var(--belly);box-shadow:inset 0 0 0 1.5px rgba(255,246,239,.45)}
.btn--outline-light:hover{background:rgba(255,246,239,.12);color:var(--belly)}

.btn .ico{width:18px;height:18px;flex:0 0 auto}

/* ---------- Tags / badges ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--body);font-size:var(--fs-small);font-weight:600;
  padding:4px 11px;border-radius:var(--r-pill);
  background:var(--apricot);color:var(--ember);white-space:nowrap;
}
.tag--roadmap{background:#EEF1F4;color:var(--slate)}
.tag--ok{background:rgba(24,178,107,.14);color:#0E7A48}
.tag--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

.badge-popular{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:var(--fs-small);font-weight:600;
  padding:5px 13px;border-radius:var(--r-pill);
  background:var(--grad);color:#fff;box-shadow:var(--shadow-sm);white-space:nowrap;
}

/* ---------- Card (Apple-style glass) ---------- */
.card{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-glass);
  box-shadow:var(--glass-shadow);
}

/* ---------- Logo / wordmark ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--midnight)}
.logo:hover{text-decoration:none}
.logo .scout{width:34px;height:34px}
.wordmark{font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;line-height:1}
.wordmark .a{color:var(--fox)}

/* ---------- Favicon-style account chip mark ---------- */
.favi{width:38px;height:38px;border-radius:10px;background:var(--apricot);color:var(--ember);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;flex:0 0 auto}

/* ---------- Signature: the code chip ---------- (adapted from brand-preview.html) */
.chip{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border:1px solid var(--glass-border);border-radius:14px;
  background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);width:100%;max-width:360px;
}
.chip__acct{display:flex;align-items:center;gap:12px;min-width:0}
.chip__meta{min-width:0}
.chip__name{font-family:var(--body);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip__user{font-size:12px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip__right{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.chip__code{font-family:var(--mono);font-size:28px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;border-radius:6px;color:var(--midnight)}
.chip__code:hover{color:var(--ember)}
.ring{transform:rotate(-90deg);flex:0 0 auto}
.ring .track{stroke:var(--line)}
.ring .prog{stroke:var(--fox);stroke-linecap:round;stroke-dasharray:163;animation:count 30s linear infinite, hue 30s linear infinite}
@keyframes count{from{stroke-dashoffset:0}to{stroke-dashoffset:163}}
@keyframes hue{0%,82%{stroke:var(--fox)}83%,100%{stroke:var(--amber)}}

/* ---------- Scout the mascot ---------- (idle bob + blink lifted from brand-preview.html) */
.scout{display:inline-block;line-height:0}
.scout svg{width:100%;height:100%}
.fox{animation:bob 3.4s ease-in-out infinite}
.blink{transform-origin:center;animation:blink 5s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
/* copy-wink: toggled by JS on copy */
.scout.is-wink .eye-r{transform-origin:74px 61px;animation:wink .5s var(--ease-out)}
@keyframes wink{0%,100%{transform:scaleY(1)}35%,65%{transform:scaleY(.12)}}

/* ---------- Avatar (testimonial placeholder) ---------- */
.avatar{width:56px;height:56px;border-radius:50%;background:var(--apricot);color:var(--ember);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:600;font-size:1.25rem;flex:0 0 auto}

/* ---------- Toast (copy confirmation) ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:var(--midnight);color:var(--belly);font-size:var(--fs-small);font-weight:600;
  padding:10px 16px;border-radius:var(--r-pill);box-shadow:var(--shadow-lg);
  display:inline-flex;align-items:center;gap:8px;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);z-index:var(--z-toast);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ico{width:16px;height:16px;color:var(--green)}

/* ---------- Inline list icon (checks, pains) ---------- */
.ico-line{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}