/* ============================================================
   ApexQuant · components.css
   Reusable cosmetic component styles — buttons, cards, pills, nav,
   trustline, inputs. Depends on colors_and_type.css tokens.
   ============================================================ */

/* ===== Buttons — FLAT, pill 999px. No shadow at rest.
   Hover = color change ONLY (+ arrow slides +4px). Never lift. ===== */
.aq-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill);
  font-family: var(--font); font-weight: 500; letter-spacing: -0.005em;
  line-height: 1; text-decoration: none; padding: 16px 24px; font-size: 15px;
  text-align: center;
  transition: background .22s var(--ease), box-shadow .26s var(--ease);
}
.aq-btn .arr { width: 14px; height: 14px; display: inline-block; flex: 0 0 auto; transition: transform .26s var(--ease); }
.aq-btn:hover .arr { transform: translateX(4px); }

.aq-btn-primary { background: var(--accent, var(--apex-blue)); color: var(--accent-ink, #fff); }
.aq-btn-primary:hover { background: var(--accent-hover, var(--apex-blue-hover)); }

.aq-btn-ghost { background: rgba(255,255,255,0.04); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); }
.aq-btn-ghost:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32); }

.aq-btn-dark { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.aq-btn-dark:hover { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }

.aq-btn-aurex { background: var(--aurex-gold); color: var(--apex-night); }
.aq-btn-aurex:hover { background: var(--aurex-gold-dark); }

.aq-btn-protocol { background: var(--protocol-red); color: #fff; }
.aq-btn-protocol:hover { background: var(--protocol-red-hover); }

/* Nav size — height 35, smaller pad/font */
.aq-btn-nav { padding: 0 14px; height: 35px; font-size: 14px; white-space: nowrap; }

/* ===== Lockup / wordmark ===== */
.lockup { display: inline-flex; align-items: center; gap: calc(var(--h,38px)*0.2857); line-height: 1; text-decoration: none; color: inherit; flex-shrink: 0; }
.mark-box {
  width: var(--h,38px); height: var(--h,38px); border-radius: calc(var(--h,38px)*0.1429);
  display: grid; place-items: center; flex-shrink: 0; background: var(--navy-cta);
  box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(30,91,255,0.55)); position: relative; overflow: hidden;
}
/* "A" glyph — 0.62×h tall (21.7px @ navbar h=35), natural aspect (no distortion), centered. */
.mark-box svg { width: auto; height: calc(var(--h,38px)*0.62); display: block; color: var(--accent, var(--apex-blue)); }
.lockup .wordmark { font-family: var(--font); font-weight: 600; font-size: calc(var(--h,38px)*0.6857); letter-spacing: -0.035em; white-space: nowrap; color: var(--bone); }
.lockup .wordmark .light { font-weight: 300; }

/* ===== Announcement / eyebrow pill (with live dot) ===== */
.aq-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 26px; border-radius: var(--r-block);
  background: rgba(12,20,40,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  font-family: var(--font); color: var(--soft-grey); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
}
.aq-pill::before {
  content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--apex-blue));
  box-shadow: 0 0 8px var(--accent, var(--apex-blue)), 0 0 14px rgba(30,91,255,0.6);
  animation: aqPulse 1.6s ease-in-out infinite;
}
.aq-pill .chip {
  display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--r-chip);
  background: var(--accent, var(--apex-blue)); color: var(--accent-ink, #fff);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1;
}
@keyframes aqPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Live announcement pill — identical to the NEW pill, in LIVE red */
.aq-pill--live::before { background: var(--no-red); }
.aq-pill--live .chip { background: var(--no-red); color: #fff; }

/* ===== Cards ===== */
.aq-card {
  background: var(--card-2); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--card-line); padding: 24px;
}
.aq-card--box { border-radius: var(--r-box); }
.aq-card--sm { border-radius: var(--r-card-sm); padding: 16px; }

/* ===== Inputs ===== */
.aq-input {
  width: 100%; background: rgba(255,255,255,0.03); color: var(--bone);
  border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
  border-radius: var(--r-input); padding: 12px 14px;
  font-family: var(--font); font-size: 15px; letter-spacing: -0.005em;
  transition: box-shadow .2s var(--ease);
}
.aq-input::placeholder { color: var(--muted); }
.aq-input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--apex-blue); }

/* ===== Badge / chip ===== */
.aq-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius: var(--r-badge); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.aq-badge--live { position: relative; margin-left: 16px; background: var(--no-red); color: #fff; }
.aq-badge--live::before { content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--no-red); animation: aqPulse 1.6s ease-in-out infinite; }
.aq-badge--blue { background: var(--apex-blue); color: #fff; }

/* ===== Announcement bar (top "Free demo" bar — 40px, dismissable) ===== */
.announcement-bar {
  position: relative; height: 40px; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 0 24px; background: var(--apex-blue); color: #fff; font-family: var(--font);
}
.announcement-bar .ann-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.24); font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.announcement-bar .ann-text { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: rgba(255,255,255,0.94); }
.announcement-bar .ann-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: #fff; text-decoration: none; transition: opacity .15s var(--ease); }
.announcement-bar .ann-cta:hover { opacity: 0.85; }
.announcement-close {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border-radius: 999px; border: 0; background: transparent; color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.announcement-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
/* Mobile form — 36px, badge + ellipsised text + X, CTA hidden (per source @container rules) */
.announcement-bar--mobile { height: 36px; gap: 8px; justify-content: flex-start; padding: 0 36px 0 14px; }
.announcement-bar--mobile .ann-badge { flex: none; padding: 2px 7px; font-size: 9px; letter-spacing: .20em; }
.announcement-bar--mobile .ann-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.announcement-bar--mobile .ann-cta { display: none; }
.announcement-bar--mobile .announcement-close { right: 8px; width: 24px; height: 24px; }
.announcement-bar--mobile .announcement-close svg { width: 11px; height: 11px; }
@media (max-width: 767px){
  .announcement-bar:not(.announcement-bar--mobile) { padding: 0 40px; gap: 8px; justify-content: center; }
  .announcement-bar:not(.announcement-bar--mobile) .ann-cta { display: none; }
  .announcement-bar:not(.announcement-bar--mobile) .announcement-close { right: 16px; }
}