/* Когнитивный возраст — стили доменных шкал, профиля и легенды.
   База (pa-*, ml-*, ba-*, pa-rec-card, q-card, it-progress) приходит из
   calc-phenoage.css + tool-metabolic-lifestyle.css + tool-iron-test.css. */

/* Возрасты: ровно две карточки в ряд (хронологический + когнитивный) */
.ca-ages { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .ca-ages { grid-template-columns: 1fr; } }

/* ── Легенда доменных шкал ── */
.ca-domains__lead {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--v2-ink-3);
  line-height: 1.5;
  margin: -2px 0 16px;
}
.ca-leg {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
}
.ca-leg::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 5px;
}
.ca-leg--low::before  { background: #ef4444; }
.ca-leg--mid::before  { background: #f59e0b; }
.ca-leg--high::before { background: #10b981; }

/* ── Доменные шкалы ── */
.ca-domains {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.ca-domain {
  border: 1px solid var(--v2-line, #e6e8f0);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}
.ca-domain__top {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.ca-domain__icon {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--v2-bg-alt, #f3f6fb);
  color: var(--v2-ink-2);
}
.ca-domain__icon .material-symbols-outlined { font-size: 20px; }
.ca-domain__name {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--v2-ink);
  line-height: 1.2;
}
.ca-domain__score {
  margin-left: auto;
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--v2-ink);
}
.ca-domain__score-unit {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--v2-ink-3);
}
.ca-domain__track {
  position: relative;
  height: 9px;
  border-radius: 99px;
  background: var(--v2-bg-alt, #eef1f7);
  overflow: hidden;
}
.ca-domain__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 99px;
  width: 0;
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.ca-domain__foot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 11px;
  flex-wrap: wrap;
}
.ca-domain__badge {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 99px;
}
.ca-domain__desc {
  font-size: 13px;
  color: var(--v2-ink-3);
  line-height: 1.4;
}

/* Уровни — цвет акцента шкалы и бейджа */
.ca-domain--high { border-color: rgba(16,185,129,.35); }
.ca-domain--high .ca-domain__fill   { background: linear-gradient(90deg, #34d399, #10b981); }
.ca-domain--high .ca-domain__badge  { background: rgba(16,185,129,.13); color: #047857; }
.ca-domain--high .ca-domain__icon   { background: rgba(16,185,129,.12); color: #059669; }

.ca-domain--mid .ca-domain__fill    { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ca-domain--mid .ca-domain__badge   { background: rgba(245,158,11,.14); color: #b45309; }
.ca-domain--mid .ca-domain__icon    { background: rgba(245,158,11,.12); color: #d97706; }

.ca-domain--low { border-color: rgba(239,68,68,.32); }
.ca-domain--low .ca-domain__fill    { background: linear-gradient(90deg, #f87171, #ef4444); }
.ca-domain--low .ca-domain__badge   { background: rgba(239,68,68,.12); color: #dc2626; }
.ca-domain--low .ca-domain__icon    { background: rgba(239,68,68,.12); color: #dc2626; }

/* ── Профиль ── */
.ca-profile { margin-bottom: 8px; }
.ca-profile__overview {
  background: var(--v2-bg-alt, #f3f6fb);
  border: 1px solid var(--v2-line, #e6e8f0);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--v2-ink-2);
  margin-bottom: 14px;
}
.ca-profile__overview b { color: var(--v2-ink); font-weight: 700; }
.ca-profile__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .ca-profile__cols { grid-template-columns: 1fr; } }
.ca-profile__col {
  border: 1px solid var(--v2-line, #e6e8f0);
  border-radius: 14px;
  padding: 15px 17px;
  background: #fff;
  border-left-width: 4px;
}
.ca-profile__col--strength { border-left-color: #10b981; }
.ca-profile__col--focus    { border-left-color: #ef4444; }
.ca-profile__col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-ink-3);
  margin-bottom: 8px;
}
.ca-profile__col-head .material-symbols-outlined { font-size: 17px; }
.ca-profile__col--strength .ca-profile__col-head .material-symbols-outlined { color: #059669; }
.ca-profile__col--focus .ca-profile__col-head .material-symbols-outlined    { color: #dc2626; }
.ca-profile__col-name {
  font-family: var(--font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--v2-ink);
  margin-bottom: 5px;
  line-height: 1.2;
}
.ca-profile__col-text {
  font-size: 13.5px;
  color: var(--v2-ink-2);
  line-height: 1.5;
}

@media (max-width: 520px) {
  .ca-domain__name { font-size: 15px; }
  .ca-domain__score { font-size: 21px; }
}