/* ツール本体（図・答え・入力）。色は site.css のトークンだけを使う */
.tool{
  position:relative;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);
  box-shadow:var(--shadow);padding:20px;
}
@media (max-width:480px){.tool{padding:14px}}

.tool .tabs{max-width:min(560px,100%);margin:0 auto 12px}

/* ---- 図 ---- */
.fig{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;overflow:hidden}
.fig .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fig .ac{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.fig .gd{fill:none;stroke:var(--line-2);stroke-width:1}
.fig .dash{stroke-dasharray:4 4}
.fig .fw{fill:var(--blue-wash);stroke:none}
.fig .fa{fill:var(--blue);stroke:none}
.fig .fi{fill:var(--ink);stroke:none}
.fig .fb{fill:var(--bg)}
.fig text{fill:var(--ink-2);font-size:12px;font-family:var(--f-num);font-variant-numeric:tabular-nums}
.fig text.k{fill:var(--ink);font-size:13px;font-weight:700}
.fig text.a{fill:var(--blue);font-size:13px;font-weight:700}
.fig text.on{fill:var(--bg);font-weight:700}

/* ---- 答え ---- */
.readout{
  /* 改行の位置は前から順に決める（pretty にすると、数が 1 けた変わるだけで前の行まで組み直される） */
  overflow-wrap:anywhere;text-wrap:wrap;
  max-width:560px;margin:16px auto 0;padding:12px 16px;border-radius:9px;
  background:var(--surface);font-family:var(--f-num);font-variant-numeric:tabular-nums;
}
.readout .eq{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.readout .ans{font-size:22px;font-weight:700;line-height:1.5}
.readout .ans b{color:var(--blue)}
/* 説明の文の中で、いまの状態で変わる数や結果（太字にして、変わる所が分かるようにする） */
.readout .eq b{color:var(--ink);font-weight:700}
/* 短い値は 1 かたまりにして、幅を tool.js がとっておく（数が変わっても文が動かない） */
.readout b.keep{display:inline-block;max-width:100%;text-indent:0}

/* ---- 入力 ---- */
.ctrls{max-width:560px;margin:16px auto 0;display:grid;gap:10px}
.ctrls{grid-template-columns:minmax(0,1fr)}
/* 列：名前・メーター・数の欄・単位。単位を別の列にして、単位の長さがちがっても数の欄の位置をそろえる */
.ctl{display:grid;grid-template-columns:9em 1fr auto auto;align-items:center;gap:12px;font-size:14px}
/* スライダーの行どうしで列をそろえる（数の欄の幅が行ごとに違っても、メーターの横幅が同じになる） */
@supports (grid-template-columns:subgrid){
  .ctrls{grid-template-columns:9em minmax(0,1fr) auto auto;column-gap:12px}
  /* 単位がひとつもないツールでは、単位の列（とその前のすき間）を作らない */
  .ctrls:not(:has(.unit:not(:empty))){grid-template-columns:9em minmax(0,1fr) auto}
  .ctrls > *{grid-column:1/-1}
  .ctl{grid-template-columns:subgrid}
  /* スライダーを入れ物（タブで切りかえる組など）に入れたときも、列をそのまま中へ伝える */
  .ctrls :not(.ctl):has(.ctl){display:grid;grid-template-columns:subgrid;row-gap:10px}
  .ctrls :not(.ctl):has(.ctl) > *{grid-column:1/-1}
}
.ctl .rng{display:flex;align-items:center;gap:6px;min-width:0}
.ctl input[type=range]{flex:1;min-width:0;width:100%;margin:0;accent-color:var(--blue)}
/* 1 目もりずつ動かすボタン */
.ctl .stp{
  flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--bg);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;touch-action:manipulation;
}
.ctl .stp:hover{border-color:var(--blue);color:var(--blue)}
/* 再生ボタン（自動で動かす） */
.ctl .ply{border-color:var(--blue);color:var(--blue);font-size:12px}
.ctl .ply.on{background:var(--blue);color:var(--bg)}
/* 同じツールに再生ボタンのある行があるときは、ない行にも同じ幅の空きを入れて、メーターの長さをそろえる */
/* （答えを見るまで隠している行の再生ボタンは数えない） */
.ctrls:has(.ctl:not([hidden]) .ply) .rng:not(:has(.ply))::before{content:'';flex:none;width:28px}
/* 数を直接入れる欄 */
.ctl .val{display:contents}
.ctl .num{
  justify-self:end;width:5.6em;padding:3px 6px;border:1px solid var(--line-2);border-radius:6px;
  background:var(--bg);color:var(--ink);text-align:right;
  font:700 14px var(--f-num);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;
}
.ctl .num::-webkit-inner-spin-button,.ctl .num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ctl .num:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.ctl .unit{font-size:13px;color:var(--ink-2);white-space:nowrap;margin-left:-8px}
.ctl .unit:empty{display:none}
/* 入力の下に添える短い説明（選んだものが何をするか） */
.ctrls .desc{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.ctrls .desc b{color:var(--ink)}
@media (max-width:480px){
  .ctl{grid-template-columns:1fr auto auto;gap:4px 12px}
  .ctl .rng{grid-column:1/-1;grid-row:2}
  @supports (grid-template-columns:subgrid){
    .ctrls{grid-template-columns:minmax(0,1fr) auto auto}
    .ctrls:not(:has(.unit:not(:empty))){grid-template-columns:minmax(0,1fr) auto}
    .ctl{grid-template-columns:subgrid}
  }
}

/* ---- ボタン ---- */
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{
  padding:9px 16px;border:1px solid var(--line-2);border-radius:7px;
  background:var(--bg);font-size:14px;font-weight:700;color:var(--ink);
  transition:border-color .15s,color .15s;
}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.pri:hover{color:#fff;opacity:.9}
.btn:disabled{opacity:.4;cursor:default}
/* 答えを見るボタンと、隠している答えの箱 */
.btn.reveal{border-style:dashed}
.btn.reveal[aria-pressed=true]{border-style:solid}
.readout .hid{display:inline-block;min-width:2.4em;padding:0 8px;border:1px dashed var(--line-2);border-radius:6px;color:var(--ink-2);font-weight:400;text-align:center}
.fig .click{cursor:pointer;-webkit-user-select:none;user-select:none}
/* 図の文字を、ダブルクリックしても選択しない（ツールの側で svg に nosel を付ける） */
.fig.nosel{-webkit-user-select:none;user-select:none}

/* ---- ドラッグ ---- */
.fig .grip{fill:var(--bg);stroke:var(--blue);stroke-width:2.5}
.fig .hit{fill:transparent;stroke:none;cursor:grab;touch-action:none}
/* つかめる部品の上では、指の動きをページのスクロールに使わない */
.fig [data-drag]{touch-action:none}
.fig .hit:active{cursor:grabbing}

/* ---- タップできるところ ---- */
.btn{border:2px solid var(--blue)}
.btn:disabled{border-color:var(--line-2)}
.fig .zone{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:4 4;opacity:.7}

/* ---- 色分けした線（ふるいの倍数など） ---- */
.fig .mline{fill:none;stroke-width:4;stroke-linecap:round;opacity:.8}
.fig circle.mline{stroke-width:2.5;opacity:1}
.fig .m1{stroke:var(--red)}
.fig .m2{stroke:var(--blue)}
.fig .m3{stroke:var(--green)}
.fig .m4{stroke:var(--cyan)}
/* 引いたばかりの線は、端からのびる */
.fig .fresh{stroke-dasharray:100;animation:fig-draw .6s ease-out}
@keyframes fig-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fig .fresh{animation:none}}

/* ---- 図の中の小さな説明（data-tip） ---- */
.tip{
  position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));
  padding:4px 9px;border-radius:6px;background:var(--ink);color:var(--bg);
  font-size:13px;line-height:1.5;width:max-content;max-width:260px;box-shadow:var(--shadow);
}

/* ---- 単元のページ：ステップごとの区切り ---- */
.step{margin:0 0 44px}
.step-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 10px;font-size:20px;font-weight:900}
.step-no{font-size:13px;font-weight:700;color:var(--blue);border:2px solid var(--blue);border-radius:999px;padding:1px 10px}
.step-lead{font-size:15px;line-height:1.9;margin:0 0 4px;color:var(--ink)}
.step-lead p{margin:0 0 8px}
.step-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;font-size:13px;color:var(--ink-2)}