/* v1.5 – Deterministic suggestions, print-to-PDF, tiny chart, spacing & mobile */
.d24-cpi-card {
  --d24-primary: var(--wp--preset--color--contrast, #111827);
  --d24-accent: var(--wp--preset--color--primary, #00C2A8);
  --d24-bg: #fff;
  --d24-radius: 18px;
  font-family: inherit;
  color: var(--d24-primary);
  background: var(--d24-bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--d24-radius);
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
  max-width: 960px;
  margin: 1.25rem auto;
}

.d24-cpi-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.d24-cpi-card h3 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.2; }

/* Tabs */
.d24-tabs { display: inline-flex; background: rgba(0,0,0,0.05); border-radius: 9999px; padding: 5px; gap: 4px; }
.d24-tab { appearance: none; background: transparent; border: 0; padding: 10px 16px; border-radius: 9999px; font-weight: 600; cursor: pointer; }
.d24-tab[aria-selected="true"] { background: var(--d24-accent); color: #fff; }

.d24-helper { margin: 8px 0 12px; font-size: .95rem; opacity: .85; }

.d24-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 900px) { .d24-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .d24-grid { grid-template-columns: 1fr; } }

.d24-cpi-card label span { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.d24-cpi-card input, .d24-cpi-card select {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  background: #fff;
  color: inherit;
}

.d24-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.d24-button { background: var(--d24-accent); color: #fff; border: none; border-radius: 9999px; padding: 12px 18px; font-weight: 700; cursor: pointer; }
.d24-button:hover { filter: brightness(0.95); }
.d24-secondary { background: transparent; border: 1px solid rgba(0,0,0,0.15); color: var(--d24-primary); border-radius: 9999px; padding: 12px 18px; font-weight: 700; cursor: pointer; }

.d24-output { margin-top: 22px; }
.d24-cpi-score { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.d24-score-number { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 800; line-height: 1; }
.d24-score-badge { display: inline-block; padding: 7px 12px; border-radius: 9999px; font-weight: 700; background: rgba(0,0,0,0.06); }

.d24-subscores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .d24-subscores { grid-template-columns: 1fr; } }

.d24-sub-top { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; margin-bottom: 8px; }
.d24-bar { width: 100%; height: 12px; border-radius: 9999px; background: rgba(0,0,0,0.08); overflow: hidden; }
.d24-bar-fill { height: 100%; width: 0%; background: var(--d24-accent); border-radius: 9999px; transition: width .4s ease; }

.d24-mini-chart { margin-top: 16px; }
.d24-mini-chart canvas { width: 100%; height: auto; border: 1px dashed rgba(0,0,0,0.08); border-radius: 12px; padding: 6px; }

.d24-recos h4 { margin: 14px 0 8px; font-size: 1.05rem; }
.d24-recos ul { margin: 0; padding-left: 18px; }
.d24-recos li { margin: 6px 0; line-height: 1.35; }

/* Print styles for PDF */
@media print {
  .d24-tabs, .d24-actions { display: none !important; }
  .d24-cpi-card { box-shadow: none; border-color: #ddd; }
}