/* Категории артериального давления. Дополняет calc-phenoage.css + tool-hypertension.css. */

/* Select в форме — под стиль pa-field, минималистичный серый шеврон */
.bp-select {
  width: 100%;
  padding: 13px 38px 13px 14px;
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2370738f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  font-family: var(--v2-font);
  font-size: 15.5px;
  color: var(--v2-ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.bp-select:focus { outline: none; }
/* Мягкий, не «чёрный» фокус именно у селектов: светло-серая рамка без тяжёлой тени */
.pa-field__inputwrap:has(.bp-select):focus-within {
  background: var(--v2-surface);
  border-color: #cdd3e0;
  box-shadow: none;
}

/* мелкая «норма» внутри значения метрики */
.ht-metric-norm { font-size: 12px; font-weight: 500; color: var(--v2-ink-3); }

/* ── Карточка балла риска ── */
.bp-risk-card {
  border: 1px solid var(--v2-border, #e6e8f0);
  border-radius: 16px;
  padding: 20px 22px;
  background: var(--v2-surface, #fff);
  margin: 22px 0;
}
.bp-risk__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.bp-risk__label { font-family: var(--v2-font); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--v2-ink-3); margin-bottom: 4px; }
.bp-risk__score {
  font-family: var(--v2-font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700; font-size: 40px; line-height: 1; color: var(--v2-ink);
}
/* Уровень риска — просто цветная надпись, без рамки/фона */
.bp-risk__level {
  font-family: var(--v2-font-display, 'Cabinet Grotesk', sans-serif);
  font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap;
}
.bp-risk__level--ok { color: #059669; }
.bp-risk__level--m  { color: #b45309; }
.bp-risk__level--h  { color: #dc2626; }
.bp-risk__level--vh { color: #991b1b; }

.bp-risk__track { height: 12px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.bp-risk__fill { height: 100%; border-radius: 99px; width: 0; transition: width .9s cubic-bezier(.22,.61,.36,1); background: #10b981; }
.bp-risk__fill--ok { background: #10b981; }
.bp-risk__fill--m  { background: #f59e0b; }
.bp-risk__fill--h  { background: #f06b4f; }
.bp-risk__fill--vh { background: #991b1b; }
.bp-risk__desc { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--v2-ink-2); }

.bp-factors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bp-factor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--v2-border, #e6e8f0); background: var(--v2-surface-2, #f6f8fc);
  font-size: 12.5px; color: var(--v2-ink-2);
}
.bp-factor__name { font-weight: 600; }
.bp-factor__pts { font-family: var(--v2-font-display, 'Cabinet Grotesk', sans-serif); font-weight: 700; color: var(--v2-ink); }