/* 配管の切寸法と振りだけの見た目（共通の style.css には足さない）。
   色は共通のまま（墨・押せる所の藍・注意の茶）。「入らない」は茶の縁と見出しで言う。
   ★道具の画面には説明の文を置かない（読み物は共通の .more-list）。ここにあるのは答えの欄と本文の図だけ。 */

.tool select { cursor: pointer; }

/* 測り方（芯々から／継手の奥から）: 名前と但し書きを2段に */
.choices.references { flex-direction: column; gap: 8px; }
.choices.references label { align-items: flex-start; }
.choices.references label > span { display: flex; flex-direction: column; gap: 0; }
.choices.references .hint { font-size: 13px; color: var(--muted); }

/* 答え */
.result.answer, .result.empty, .result.lock { background: var(--surface); }
.result .label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; }
.result .hero { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.result .hero b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.result .unit { font-size: 15px; color: var(--muted); font-weight: 400; }
.result .headline { font-size: 19px; font-weight: 700; line-height: 1.4; color: var(--warn); }
.result .headline.fits { color: var(--fg); }
.result .headline-sm { font-weight: 600; }
.result.warn .what { color: var(--warn); }

.answer-rows { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.answer-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.answer-rows dt { color: var(--muted); font-size: 15px; }
.answer-rows dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.alternatives { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.alternative { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.alternative-head { font-weight: 700; }
.alternative-figures { list-style: none; padding-left: 0; gap: 0; font-size: 13px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pro-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--fg);
  vertical-align: 2px;
}
.result .callout { background: var(--bg); border-radius: 6px; padding: 8px 10px; }
.result.lock .lock-head { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.result.lock a { font-weight: 600; }

/* 説明の表: 継手の名前と寸法を1行に（スマホで「エ／ル／ボ」と1字ずつ折れないように。表は横に動く） */
td.nowrap { white-space: nowrap; }
/* 「参考」の行の印（値の後ろの小さな ※） */
small.ref-mark { font-size: 0.72em; color: var(--muted); margin-left: 2px; font-family: var(--font); }

/* 本文の図（芯々・芯引き・切寸法） */
.figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.figure .fig { width: 100%; height: auto; max-width: 640px; color: var(--fg); }
.fig-fitting { fill: none; stroke: var(--line); stroke-width: 40; stroke-linejoin: round; }
.fig-pipe { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.fig-center { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 6 4; }
.fig-guide { stroke: var(--muted); stroke-width: 1; }
.fig-dim { stroke: currentColor; stroke-width: 1.2; }
/* ★図は 640 幅で描いて、スマホでは半分ほどに縮む＝字は大きめに描く */
.fig-label { fill: currentColor; font-size: 19px; font-family: var(--font); }
.fig-small { font-size: 15px; }
text.fig-strong { font-weight: 700; }
line.fig-strong { stroke-width: 2; }