/* Clear Cited — sticky teardown CTA + scroll-depth reveal (Wave 183 P1).
   Unobtrusive, dismissible, a11y-clean. Paired with /cta-sticky.js, which un-hides
   the bar on mobile or at ~55% scroll depth on long learn pages. Hidden until then. */

.cc-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* above content, below the feedback panel / any modal */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px calc(14px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) 14px;
  background: var(--card, #ffffff);
  border-top: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 -6px 20px rgba(15, 23, 34, 0.10);
  font-size: 14px;
}

.cc-sticky-cta[hidden] { display: none; }

.cc-sticky-cta .cc-sticky-msg {
  flex: 1 1 auto;
  color: var(--muted, #475569);
  line-height: 1.3;
  min-width: 0;
}

.cc-sticky-cta .btn { flex: 0 0 auto; white-space: nowrap; }

.cc-sticky-cta .cc-sticky-x {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted, #475569);
  font-size: 22px;
  line-height: 1;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 8px;
}
.cc-sticky-cta .cc-sticky-x:hover { color: var(--ink, #0f1720); background: var(--bg, #f1f5f9); }
.cc-sticky-cta .cc-sticky-x:focus-visible { outline: 2px solid var(--brand, #1F6FEB); outline-offset: 2px; }

/* On roomy viewports (long learn pages), float a centered pill rather than a full bar. */
@media (min-width: 641px) {
  .cc-sticky-cta {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 460px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
  }
}

/* On phones the feedback tab sits at the right edge — keep the dismiss clear of it. */
@media (max-width: 640px) {
  .cc-sticky-cta .cc-sticky-msg { font-size: 13px; }
}

@media print { .cc-sticky-cta { display: none !important; } }