/* =====================================================================
   style.css — 血圧の分類 ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 医療免責ボックス（注意喚起）。共通の callout が無いのでツール内で定義。 */
.bp-disclaimer {
  margin: var(--sg-space-4, 16px) 0;
  padding: 14px 16px;
  border: 1px solid #f0b8b8;
  border-left: 4px solid #d94747;
  border-radius: var(--sg-radius, 10px);
  background: #fff5f5;
  color: #7a1f1f;
  font-size: 0.9rem;
  line-height: 1.7;
}
.bp-disclaimer strong {
  display: block;
  margin-bottom: 2px;
}
:root.sg-dark .bp-disclaimer,
html.sg-dark .bp-disclaimer {
  background: #3a1f1f;
  border-color: #6b3535;
  border-left-color: #e06b6b;
  color: #f3c7c7;
}

/* 結果値はタブ幅数字 + 折り返し許可（ラベルが長い） */
.sg-result__value {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 5.5vw, 2.1rem);
  line-height: 1.3;
}

/* 分類ごとの色味（控えめ・医療を装わない範囲で段階感だけ） */
.bp-cat--normal { color: #2b8a3e; }
.bp-cat--high-normal { color: #5c940d; }
.bp-cat--elevated { color: #e8950c; }
.bp-cat--grade1 { color: #e8590c; }
.bp-cat--grade2 { color: #d9480f; }
.bp-cat--grade3 { color: #c92a2a; }

/* 分類表 */
.bp-table-wrap {
  overflow-x: auto;
}
.bp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.bp-table th,
.bp-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--sg-border, #e3e6ee);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-table thead th {
  font-size: 0.82rem;
  color: var(--sg-muted, #667);
  font-weight: 600;
}
.bp-table .bp-andor {
  color: var(--sg-muted, #889);
  font-size: 0.82rem;
}
.bp-table tbody tr.is-current {
  background: var(--sg-accent-soft, #eef2ff);
  font-weight: 700;
}
:root.sg-dark .bp-table tbody tr.is-current,
html.sg-dark .bp-table tbody tr.is-current {
  background: rgba(91, 123, 219, 0.22);
}

/* 補助ラベルを入力直下に詰める */
.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}