/* ==========================================================================
   Content states: compare summary chips, table panel, empty/error panels,
   retry button, loading skeleton (shimmer keyframe lives in styles.css).
   ========================================================================== */

.content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 320px;
}

/* Compare summary: section label + semantic count chips, no separators. */
.summary-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  animation: fade-in var(--dur-standard) var(--ease-standard) both;
}

.summary-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  margin-right: var(--space-1);
}

.summary-strip .count-up,
.summary-strip .count-down,
.summary-strip .count-flat,
.summary-strip .count-text {
  font-weight: 600;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.summary-strip .count-up {
  color: var(--status-advance);
  background: var(--status-advance-bg);
  border-color: rgba(62, 207, 142, 0.28);
}

.summary-strip .count-down {
  color: var(--status-regress);
  background: var(--status-regress-bg);
  border-color: rgba(255, 99, 105, 0.3);
}

.summary-strip .count-flat {
  color: var(--text-secondary);
  background: var(--status-flat-bg);
}

.summary-strip .count-text {
  color: var(--pill-unavailable-fg);
  background: var(--pill-unavailable-bg);
  border-color: rgba(240, 179, 87, 0.3);
}

.panel--table {
  overflow: hidden;
  animation: rise-in var(--dur-emphasis) var(--ease-emphasis) both;
}

/* ---------------------------------------------------------- empty / error */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  max-width: 46ch;
  margin: 0 auto;
  animation: fade-in var(--dur-standard) var(--ease-standard) both;
}

.state-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.state-title::after {
  /* Quiet accent rule under every state headline. */
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(90deg, var(--accent-indigo), transparent);
  border-radius: var(--radius-pill);
}

.state-body {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  line-height: 1.6;
}

.state--error .state-title {
  color: var(--status-regress);
}

.state--error .state-title::after {
  background: linear-gradient(90deg, var(--status-regress), transparent);
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  margin-top: var(--space-2);
  background: linear-gradient(140deg, var(--accent-indigo), #4d57b8);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--space-2) var(--space-5);
  min-height: 36px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: filter var(--dur-micro) var(--ease-out);
}

.btn:hover {
  filter: brightness(1.15);
}

.btn:active {
  transform: translateY(1px);
}

/* --------------------------------------------------------------- skeleton */

.skeleton {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-line {
  height: 44px;
  border-radius: var(--radius-control);
  background: linear-gradient(
    90deg,
    var(--surface-elevated) 25%,
    var(--surface-hover) 50%,
    var(--surface-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton-line--title {
  height: 64px;
  width: min(460px, 85%);
}

.skeleton-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}