/**
 * CITED Health — Component Styles
 *
 * Reusable UI components for the CITED design system.
 * All values reference var(--cited-*) tokens from cited-tokens.css.
 * Zero Django dependency — usable in any HTML/CSS context.
 *
 * Components: Grade Badge, Bottom Line, Stats Grid, PICO Card,
 * Citation Block, Safety Warning, Section Heading, Card, Code Block,
 * Skeleton, Efficacy Meter, Sparkline, Confidence Range, Embed Preview,
 * Cite Tab, Affiliate Button, Disclosure, Ref Number, Ref Tooltip,
 * Empty State, Error State.
 */

/* ============================================================
   Grade Badge
   Circular badge showing A-F evidence grade.
   Sizes: -sm (24px), -md (40px), -lg (64px).
   ============================================================ */

.cited-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cited-radius-full);
  font-family: var(--cited-font-mono);
  font-weight: var(--cited-font-bold);
  line-height: 1;
  flex-shrink: 0;
}

.cited-grade-badge-sm {
  width: 24px;
  height: 24px;
  font-size: var(--cited-text-xs);
}

.cited-grade-badge-md {
  width: 40px;
  height: 40px;
  font-size: var(--cited-text-lg);
}

.cited-grade-badge-lg {
  width: 64px;
  height: 64px;
  font-size: var(--cited-text-2xl);
}

.cited-grade-a {
  background-color: var(--cited-grade-a-bg);
  color: var(--cited-grade-a-text);
}

.cited-grade-b {
  background-color: var(--cited-grade-b-bg);
  color: var(--cited-grade-b-text);
}

.cited-grade-c {
  background-color: var(--cited-grade-c-bg);
  color: var(--cited-grade-c-text);
}

.cited-grade-d {
  background-color: var(--cited-grade-d-bg);
  color: var(--cited-grade-d-text);
}

.cited-grade-f {
  background-color: var(--cited-grade-f-bg);
  color: var(--cited-grade-f-text);
}

/* ============================================================
   Bottom Line Box
   Summary callout with grade-colored left border.
   ============================================================ */

.cited-bottom-line {
  border-radius: var(--cited-radius-xl);
  border-left: 4px solid var(--cited-border);
  padding: var(--cited-space-lg);
  background-color: var(--cited-bg-muted);
  line-height: var(--cited-leading-relaxed);
}

.cited-bottom-line.cited-grade-a { border-left-color: var(--cited-grade-a); background-color: var(--cited-grade-a-bg); }
.cited-bottom-line.cited-grade-b { border-left-color: var(--cited-grade-b); background-color: var(--cited-grade-b-bg); }
.cited-bottom-line.cited-grade-c { border-left-color: var(--cited-grade-c); background-color: var(--cited-grade-c-bg); }
.cited-bottom-line.cited-grade-d { border-left-color: var(--cited-grade-d); background-color: var(--cited-grade-d-bg); }
.cited-bottom-line.cited-grade-f { border-left-color: var(--cited-grade-f); background-color: var(--cited-grade-f-bg); }

/* ============================================================
   Stats Grid
   4-column responsive grid for key metrics.
   ============================================================ */

.cited-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cited-space-md);
}

@media (max-width: 768px) {
  .cited-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cited-stat-card {
  background-color: var(--cited-bg-muted);
  border-radius: var(--cited-radius-lg);
  padding: var(--cited-space-md);
}

.cited-stat-label {
  font-size: var(--cited-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cited-text-muted);
  font-weight: var(--cited-font-medium);
  margin-bottom: var(--cited-space-xs);
}

.cited-stat-value {
  font-size: var(--cited-text-2xl);
  font-family: var(--cited-font-mono);
  font-weight: var(--cited-font-bold);
  color: var(--cited-text-primary);
  line-height: var(--cited-leading-tight);
}

/* ============================================================
   PICO Card
   Study extraction card with hover lift.
   ============================================================ */

.cited-pico-card {
  background-color: var(--cited-bg-card);
  border: 1px solid var(--cited-border);
  border-radius: var(--cited-radius-xl);
  padding: var(--cited-space-lg);
  transition: transform var(--cited-duration-default) var(--cited-easing-default),
              box-shadow var(--cited-duration-default) var(--cited-easing-default);
}

.cited-pico-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cited-shadow-md);
}

.cited-pico-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--cited-text-xs);
  font-weight: var(--cited-font-medium);
  padding: 2px var(--cited-space-sm);
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-bg-muted);
  color: var(--cited-text-secondary);
  border: 1px solid var(--cited-border-light);
}

/* ============================================================
   Citation Block
   Bordered card for paper references.
   ============================================================ */

.cited-citation-block {
  background-color: var(--cited-bg-card);
  border: 1px solid var(--cited-border);
  border-radius: var(--cited-radius-lg);
  padding: var(--cited-space-md) var(--cited-space-lg);
}

.cited-citation-block .cited-citation-journal {
  font-style: italic;
  color: var(--cited-text-secondary);
  font-size: var(--cited-text-sm);
}

.cited-citation-block .cited-citation-year {
  font-family: var(--cited-font-mono);
  color: var(--cited-text-muted);
  font-size: var(--cited-text-sm);
}

.cited-citation-block .cited-citation-title {
  font-weight: var(--cited-font-semibold);
  color: var(--cited-text-primary);
  line-height: var(--cited-leading-normal);
}

/* ============================================================
   Safety Warning
   Callout for dosage warnings and contraindications.
   ============================================================ */

.cited-safety-warning {
  border-radius: var(--cited-radius-lg);
  padding: var(--cited-space-md) var(--cited-space-lg);
  line-height: var(--cited-leading-relaxed);
}

.cited-safety-warning--warning {
  border-left: 4px solid var(--cited-color-warning);
  background-color: #FFFBEB;
  color: #92400E;
}

.cited-safety-warning--danger {
  border-left: 4px solid var(--cited-color-negative);
  background-color: #FEF2F2;
  color: #991B1B;
}

.dark .cited-safety-warning--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #FCD34D;
}

.dark .cited-safety-warning--danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: #FCA5A5;
}

/* ============================================================
   Section Heading
   Flex row: accent bar + serif heading.
   ============================================================ */

.cited-section-heading {
  display: flex;
  align-items: center;
  gap: var(--cited-space-sm);
}

.cited-section-heading::before {
  content: "";
  display: block;
  width: 4px;
  height: 1.5em;
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-grade-b);
  flex-shrink: 0;
}

.cited-section-heading h2,
.cited-section-heading h3 {
  font-family: var(--cited-font-serif);
  font-weight: var(--cited-font-semibold);
  color: var(--cited-text-primary);
  margin: 0;
}

/* ============================================================
   Card (base)
   Generic content card with hover lift.
   ============================================================ */

.cited-card {
  background-color: var(--cited-bg-card);
  border: 1px solid var(--cited-border);
  border-radius: var(--cited-radius-xl);
  transition: transform var(--cited-duration-default) var(--cited-easing-default),
              box-shadow var(--cited-duration-default) var(--cited-easing-default);
}

.cited-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--cited-shadow-sm);
}

/* ============================================================
   Code Block
   Dark code display with header and syntax highlighting.
   ============================================================ */

.cited-code-block {
  background-color: var(--cited-bg-code);
  border-radius: var(--cited-radius-lg);
  padding: var(--cited-space-md);
  font-family: var(--cited-font-mono);
  font-size: var(--cited-text-sm);
  overflow-x: auto;
  color: #E2E8F0;
  line-height: var(--cited-leading-relaxed);
}

.cited-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--cited-space-sm);
  margin-bottom: var(--cited-space-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cited-code-header .cited-code-lang {
  font-size: var(--cited-text-xs);
  color: var(--cited-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cited-code-header .cited-code-copy {
  font-size: var(--cited-text-xs);
  color: var(--cited-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px var(--cited-space-sm);
  border-radius: var(--cited-radius-sm, 4px);
  transition: color var(--cited-duration-micro) var(--cited-easing-default);
}

.cited-code-header .cited-code-copy:hover {
  color: #E2E8F0;
}

.cited-syn-keyword  { color: var(--cited-syntax-keyword); }
.cited-syn-string   { color: var(--cited-syntax-string); }
.cited-syn-number   { color: var(--cited-syntax-number); }
.cited-syn-function { color: var(--cited-syntax-function); }
.cited-syn-comment  { color: var(--cited-syntax-comment); font-style: italic; }

/* ============================================================
   Skeleton
   Loading placeholder with shimmer animation.
   ============================================================ */

.cited-skeleton {
  background: linear-gradient(90deg,
    var(--cited-border-light) 25%,
    var(--cited-border) 50%,
    var(--cited-border-light) 75%
  );
  background-size: 200% 100%;
  animation: cited-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--cited-radius-md);
}

@keyframes cited-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dark .cited-skeleton {
  background: linear-gradient(90deg,
    var(--cited-border-light) 25%,
    var(--cited-border) 50%,
    var(--cited-border-light) 75%
  );
  background-size: 200% 100%;
}

/* ============================================================
   Efficacy Meter
   Horizontal bar showing efficacy percentage.
   ============================================================ */

.cited-efficacy-meter {
  height: 8px;
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-bg-muted);
  overflow: hidden;
}

.cited-efficacy-fill {
  height: 100%;
  border-radius: var(--cited-radius-full);
  background: linear-gradient(90deg, var(--cited-grade-c), var(--cited-grade-a));
  transition: width var(--cited-duration-expand) var(--cited-easing-expand);
}

/* ============================================================
   Sparkline
   Tiny bar chart for inline data visualization.
   ============================================================ */

.cited-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.cited-sparkline-bar {
  width: 4px;
  border-radius: 2px 2px 0 0;
  background-color: var(--cited-grade-b);
  transition: height var(--cited-duration-default) var(--cited-easing-default);
  min-height: 2px;
}

.dark .cited-sparkline-bar {
  background-color: var(--cited-grade-b-dark-text);
}

/* ============================================================
   Confidence Range
   Horizontal track with min/max markers and fill.
   ============================================================ */

.cited-confidence-range {
  position: relative;
  height: 8px;
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-bg-muted);
}

.cited-confidence-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-grade-b);
  opacity: 0.6;
}

.cited-confidence-range-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: var(--cited-radius-full);
  background-color: var(--cited-bg-card);
  border: 2px solid var(--cited-grade-b);
}

.dark .cited-confidence-range-fill {
  background-color: var(--cited-grade-b-dark-text);
}

.dark .cited-confidence-range-marker {
  background-color: var(--cited-bg-card);
  border-color: var(--cited-grade-b-dark-text);
}

/* ============================================================
   Embed Preview
   Bordered card showing embed appearance on external sites.
   ============================================================ */

.cited-embed-preview {
  border: 2px dashed var(--cited-border);
  border-radius: var(--cited-radius-xl);
  padding: var(--cited-space-lg);
  background-color: var(--cited-bg-muted);
}

.dark .cited-embed-preview {
  border-color: var(--cited-border);
}

/* ============================================================
   Cite Tab
   Tab bar for selecting citation format (APA, MLA, etc).
   ============================================================ */

.cited-cite-tab {
  display: flex;
  border-bottom: 1px solid var(--cited-border);
  gap: 0;
}

.cited-cite-tab-item {
  padding: var(--cited-space-sm) var(--cited-space-md);
  font-size: var(--cited-text-sm);
  font-weight: var(--cited-font-medium);
  color: var(--cited-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--cited-duration-micro) var(--cited-easing-default),
              border-color var(--cited-duration-micro) var(--cited-easing-default);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.cited-cite-tab-item:hover {
  color: var(--cited-text-secondary);
}

.cited-cite-tab-item.active {
  color: var(--cited-grade-b);
  border-bottom-color: var(--cited-grade-b);
}

.dark .cited-cite-tab-item.active {
  color: var(--cited-grade-b-dark-text);
  border-bottom-color: var(--cited-grade-b-dark-text);
}

/* ============================================================
   Affiliate Button
   CTA buttons for iHerb, Amazon, etc.
   ============================================================ */

.cited-affiliate-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cited-space-sm);
  padding: var(--cited-space-sm) var(--cited-space-md);
  border-radius: var(--cited-radius-md);
  font-weight: var(--cited-font-semibold);
  font-size: var(--cited-text-sm);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity var(--cited-duration-micro) var(--cited-easing-default);
}

.cited-affiliate-btn:hover {
  opacity: 0.9;
}

.cited-affiliate-btn-iherb {
  background-color: var(--cited-color-iherb);
  color: #FFFFFF;
}

.cited-affiliate-btn-amazon {
  background-color: var(--cited-color-amazon);
  color: #FFFFFF;
}

/* ============================================================
   Disclosure
   Small-print affiliate/medical disclaimer.
   ============================================================ */

.cited-disclosure {
  font-size: var(--cited-text-xs);
  color: var(--cited-text-muted);
  border-top: 1px solid var(--cited-border-light);
  padding-top: var(--cited-space-sm);
  line-height: var(--cited-leading-relaxed);
}

/* ============================================================
   Ref Number
   Inline superscript reference badge.
   ============================================================ */

.cited-ref-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  font-size: 10px;
  font-weight: var(--cited-font-semibold);
  font-family: var(--cited-font-mono);
  background-color: var(--cited-grade-b);
  color: #FFFFFF;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: super;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--cited-duration-micro) var(--cited-easing-default);
}

.cited-ref-num:hover {
  background-color: var(--cited-grade-b-text);
}

.dark .cited-ref-num {
  background-color: var(--cited-grade-b-dark-text);
  color: #111827;
}

.dark .cited-ref-num:hover {
  background-color: var(--cited-grade-b);
}

/* ============================================================
   Ref Tooltip
   Absolute-positioned dark popover for reference details.
   ============================================================ */

.cited-ref-tooltip {
  position: absolute;
  z-index: 50;
  width: 280px;
  background-color: #1F2937;
  color: #F3F4F6;
  border-radius: var(--cited-radius-lg);
  padding: var(--cited-space-md);
  box-shadow: var(--cited-shadow-lg);
  font-size: var(--cited-text-sm);
  line-height: var(--cited-leading-normal);
  pointer-events: none;
}

.cited-ref-tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: #1F2937;
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}

.cited-ref-tooltip--above::after {
  bottom: -6px;
  top: auto;
}

.cited-ref-tooltip--below::after {
  top: -6px;
  bottom: auto;
}

/* ============================================================
   Empty State
   Centered placeholder with icon + title + CTA.
   ============================================================ */

.cited-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--cited-space-3xl) var(--cited-space-lg);
}

.cited-empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--cited-text-muted);
  margin-bottom: var(--cited-space-md);
}

.cited-empty-state-title {
  font-size: var(--cited-text-lg);
  font-weight: var(--cited-font-semibold);
  color: var(--cited-text-primary);
  margin-bottom: var(--cited-space-sm);
}

.cited-empty-state-description {
  font-size: var(--cited-text-sm);
  color: var(--cited-text-secondary);
  max-width: 320px;
  line-height: var(--cited-leading-relaxed);
  margin-bottom: var(--cited-space-lg);
}

.cited-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--cited-space-xs);
  padding: var(--cited-space-sm) var(--cited-space-md);
  border-radius: var(--cited-radius-md);
  background-color: var(--cited-grade-b);
  color: #FFFFFF;
  font-weight: var(--cited-font-medium);
  font-size: var(--cited-text-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--cited-duration-micro) var(--cited-easing-default);
}

.cited-empty-state-cta:hover {
  opacity: 0.9;
}

/* ============================================================
   Error State
   Same layout as empty state with warning styling.
   ============================================================ */

.cited-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--cited-space-3xl) var(--cited-space-lg);
}

.cited-error-state-icon {
  width: 48px;
  height: 48px;
  color: var(--cited-color-warning);
  margin-bottom: var(--cited-space-md);
}

.cited-error-state-title {
  font-size: var(--cited-text-lg);
  font-weight: var(--cited-font-semibold);
  color: var(--cited-text-primary);
  margin-bottom: var(--cited-space-sm);
}

.cited-error-state-description {
  font-size: var(--cited-text-sm);
  color: var(--cited-text-secondary);
  max-width: 320px;
  line-height: var(--cited-leading-relaxed);
}

/* ============================================================
   Print Styles
   ============================================================ */

@media print {
  .cited-grade-badge,
  .cited-affiliate-btn,
  .cited-embed-preview {
    break-inside: avoid;
  }

  .cited-card,
  .cited-pico-card,
  .cited-citation-block,
  .cited-bottom-line {
    break-inside: avoid;
    box-shadow: none;
  }

  .cited-card:hover,
  .cited-pico-card:hover {
    transform: none;
  }
}

/* ============================================================
   Reduced Motion
   Disable transitions and animations for users who prefer
   reduced motion (WCAG 2.1 SC 2.3.3).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .cited-card,
  .cited-pico-card,
  .cited-embed-preview {
    transition: none !important;
    transform: none !important;
  }
  .cited-skeleton {
    animation: none !important;
  }
  .cited-reveal-init {
    opacity: 1 !important;
    transform: none !important;
  }
}