/* 「何個入る?」の画面。共通の部品(入力・結果の数字・注意)と色・大きさ・図の色の変数は、src/style.css。ここは、この道具だけの物。 */
.options { --opt-min: 13rem; }
.col { margin-top: 0.4rem; }
.field input[type="text"], .field select { width: 100%; max-width: 20rem; }
/* 任意の設定(すき間・重さ)は、畳んでおく */
details.opt { border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 0.9rem; margin-top: 0.8rem; }
details.opt > summary { cursor: pointer; font-weight: 700; min-height: var(--tap); padding: 0.45rem 0; }
details.opt .opt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 0.8rem; padding-bottom: 0.6rem; }
details.opt .note { grid-column: 1 / -1; margin: 0.2rem 0; }

/* 図(色は :root の --fig-*。印刷は、下で白黒に) */
.fig { margin: var(--sp-4) 0 0; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 var(--sp-5); align-items: start; }
.fig svg { display: block; width: 100%; height: auto; max-width: 38rem; margin-inline: auto; background: var(--fig-bg); border: 1px solid var(--line); border-radius: var(--r-s); }
.fig .box { fill: none; stroke: var(--fig-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fig .cell-a, .fig .cell-b { stroke: var(--fig-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig .cell-a { fill: var(--fig-a); }
.fig .cell-b { fill: var(--fig-b); }
.fig figcaption { margin-bottom: 0.3rem; }
.fig .cap { margin: 0.3rem 0 0; }
.fig .label { fill: var(--fig-line); font-size: 28px; font-weight: 700; }
/* 図の色の見本(2つの向き) */
.swatch { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.25em; border: 1px solid var(--fig-line); vertical-align: -0.1em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.swatch.a { background: var(--fig-a); }
.swatch.b { background: var(--fig-b); }

/* 向きごとの表。狭い画面では、表を縮めずに横へ送る(body の overflow-wrap: anywhere で、文字の途中で折れて読めなくなるのを防ぐ) */
table.compare { border-collapse: collapse; width: 100%; min-width: 34rem; font-variant-numeric: tabular-nums; }
table.compare caption { text-align: left; color: var(--muted); font-size: var(--fs-s); padding-bottom: 0.4rem; }
table.compare th, table.compare td { border: 1px solid var(--line); padding: 0.35rem 0.6rem; text-align: right; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
table.compare th[scope="row"] { white-space: normal; min-width: 9rem; }
table.compare th[scope="col"], table.compare th[scope="row"] { text-align: left; background: var(--bg); }
table.compare td.mark { text-align: center; position: relative; }
table.compare tr.best td, table.compare tr.best th { font-weight: 700; }
table.compare tr.best th { border-left: 0.3rem solid var(--accent); }

/* 印刷: 結果の部分だけを出す(結果が新しいときだけ。html.bf-print)。図と数字だけの紙にする */
@page { margin: 12mm; }
@media print {
  html.bf-print header.site, html.bf-print footer.site, html.bf-print .skip,
  html.bf-print main .wrap > :not(#tool), html.bf-print #tool > :not(#result), html.bf-print .no-print { display: none !important; }
  html.bf-print, html.bf-print body { background: #fff; color: #000; }
  html.bf-print body { display: block; min-height: 0; }
  html.bf-print main { padding: 0; }
  html.bf-print .wrap { max-width: none; padding: 0; }
  html.bf-print .tool { border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  html.bf-print .result.old { opacity: 1; }
  html.bf-print .fig { --fig-bg: #fff; --fig-line: #000; --fig-a: #d4d4d4; --fig-b: #8a8a8a; break-inside: avoid; }
  /* 図の塗りが、印刷で消えないように(背景と同じ扱いで省くブラウザが有る) */
  html.bf-print .fig svg { border-color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.bf-print dl.stats > div, html.bf-print table.compare th, html.bf-print table.compare td { border-color: #000; }
  html.bf-print dl.stats dt, html.bf-print .note, html.bf-print .caveat, html.bf-print table.compare caption { color: #000; }
  html.bf-print table.compare th[scope="col"], html.bf-print table.compare th[scope="row"] { background: none; }
  /* 表の1行・答えの欄が、ページの切れ目で行の途中から割れないように(デザイナーの再確認の指摘) */
  html.bf-print table.compare tr, html.bf-print dl.stats > div { break-inside: avoid; page-break-inside: avoid; }
  html.bf-print .table-wrap { overflow: visible; }
}