@charset "UTF-8";
/* なみのま — 手ならし（マウス・トラックボールの練習場）
   正本= tasks/mf-cfs-media-site/36-mouse-practice.md ／ 読み込むのはこのページだけ。

   守っている線（26 設計の憲法）:
     第3条 線は 1px・実線と破線だけ。影・太線を使わない
     第4条 色を使わない。当たり／外れは**色ではなく形**で示す（実線＝的、破線＝外した所）
     第5条 5つの配色すべてで成立させる（色は必ずトークン経由。生の #hex を書かない）
     第6条 動きは作らない。★この盤面だけは的が出入りするが、**遷移アニメーションは1つも無い**
     第8条 操作するボタンは 44px 以上
   ★例外（34 §4-3）: **的そのものは 44px を下回れる**（小さいものを狙うことが練習の中身だから）。
     下限は 30px。ページの操作ボタンは例外なく 44px 以上のままにする。 */

.pr { margin-block: 2.5rem; }
/* ★[hidden] を効かせ直す。.pill は display:inline-flex を持っていて、
   ブラウザ既定の [hidden]{display:none} に勝ってしまう（記録が0件でも「記録を消す」が出ていた）。 */
.pr [hidden] { display: none !important; }
.pr h3 { margin-top: 2.4rem; }

/* ---------- 選択肢 ---------- */
.pr__opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin-block: 1.1rem; }
.pr__opt-label { flex: none; min-width: 6em; font-size: .8rem; font-weight: 700; color: var(--fg-muted); letter-spacing: .04em; }
.pr__opt-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
.pr__opt-btn {
  min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--soft); border-radius: 999px;
  background: var(--bg); color: var(--fg); font: 600 .82rem/1 var(--font-ja); letter-spacing: .02em; cursor: pointer;
}
.pr__opt-btn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.pr__more { margin-block: 1.4rem; border-top: 1px dashed var(--soft); border-bottom: 1px dashed var(--soft); }
.pr__more-sum { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: .88rem; letter-spacing: .04em; }
.pr__more-body { padding-block: .2rem 1rem; }

.pr__note { font-size: .82rem; line-height: 1.9; color: var(--fg-muted); margin-block: .8rem; }
/* ★2026-09-10。いちばん先に読ませたい注記（パソコン向けであること）。
   ★上下を1px の破線で挟む＝「同じ領域の中の小さな区切り」（26 第3条）。太い線・色は使わない。 */
.pr__note--env { margin-block: 0 1.4rem; padding-block: .8rem; border-top: 1px dashed var(--soft); border-bottom: 1px dashed var(--soft); }
.pr__caution { border-top: 1px solid var(--ink); padding-top: 1rem; margin-block: 1.6rem 0; }

/* ---------- 盤面の中の3つの層（休み／終わり／設定） ----------
   ★設定を盤面の中に重ねるのは、**ページを縦に伸ばさない**ため（okada 実機フィードバック）。
   下に置くと、開くたびにページが伸び、選び終わったあと**また上へ戻る**ことになる。
   休み・終わりは重ねる（absolute）が、**設定だけは流れに入れる**（relative）＝
   箱が中身の高さまで下へ伸びる。盤面の上端は動かないので、視線は動かない。 */
.pr__layer { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; text-align: center; }
.pr__layer-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 0; }
.pr__idle-note { margin: 0; font-size: .82rem; line-height: 1.85; color: var(--fg-muted); max-width: 26em; }
.pr__start { margin: 0; }

/* 終わりの合図。★線と余白だけで「一区切り」を出す（色を使わない＝26 第4条） */
.pr__end { border: 1px solid var(--ink); border-radius: var(--r); background: var(--bg); padding: 1.3rem 1.5rem; max-width: 30em; }
.pr__end-h { margin: 0 0 .5rem; font: 700 1.15rem/1.5 var(--font-ja); letter-spacing: .08em; }
.pr__end-sum { margin: 0 0 1.1rem; padding-top: .7rem; border-top: 1px solid var(--soft); font-size: .9rem; line-height: 1.8; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pr__end-sum:focus { outline: none; }
.pr__end-next { margin: 1rem 0 0; font-size: .78rem; line-height: 1.8; color: var(--fg-muted); }

/* ★2026-09-10。盤面の地色と同じ背景を敷く。★JS 側でも片づけているが、
   **背景が無いと、何かが残ったときに必ず透ける**。地色と同値なので見た目は変わらない。 */
.pr__layer--set { position: relative; inset: auto; display: block; text-align: start; padding: 1rem 1.1rem 1.2rem; background: var(--tint); }

/* ★2026-09-10。道具をたずねる層（その日の初回だけ）。
   ★設定の層と同じで、中身の高さまで伸びる形にする（道具が9つあるため）。 */
.pr__layer--ask { position: relative; inset: auto; display: block; text-align: start; padding: 1.1rem 1.1rem 1.3rem; background: var(--tint); }
.pr__ask-h { margin: 0 0 .2rem; font: 700 1rem/1.6 var(--font-ja); letter-spacing: .06em; }
.pr__set-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .4rem; }
.pr__set-title { font: 700 .78rem/1 var(--font-ja); letter-spacing: .12em; color: var(--fg-muted); }
.pr__set-close { width: var(--tap); height: var(--tap); flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--ink); background: var(--bg); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pr__set-close:hover { background: var(--tint); }
.pr__set-body { border-top: 1px solid var(--soft); padding-top: .3rem; }
.pr__set-body .pr__opt { margin-block: .7rem; }
.pr__set-body .pr__more { margin-block: .8rem 0; border-bottom: 0; }
.pr__set-done { margin-top: .4rem; }

/* 盤面の下の台（型えらび＋注意） */
.pr__panel { margin-block: 1.2rem; }

/* ---------- 盤面 ---------- */
/* ★下の空きは 14px 以上（`26` 第15条）。.6rem＝10px で足りていなかった。 */
.pr__hud { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-block: 1rem .9rem; }
.pr__task { margin: 0; flex: 1 1 14em; font-weight: 700; }
.pr__count { margin: 0; flex: none; font: 700 1rem/1 var(--font-en); color: var(--fg-muted); letter-spacing: .06em; }
.pr__quit { flex: none; }

.pr__stage {
  position: relative; width: 100%; height: 340px; border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--tint); overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: crosshair;
}
/* ★2026-09-10 修正（okada 実機報告「えらぶで選択肢がタップできない」）。
   ★`.pr__stage` は touch-action:none（**描く型**が指の動きを全部受け取るため）。
     「えらぶ」は描く型ではなく、中を **overflow-y:auto で送る**設計なのに、
     touch-action が none のままだったので **指では送れなかった**。
   実測（390px・段2）= 中身 456px / 見える 338px ＝ 118px はみ出し、10行のうち3行が画面の外。
   ★盤面の説明文が「盤面の中を上下に送れます」と書いているのに、実機では送れていなかった。
   → 縦の送りだけ許す（pan-y）。横は引き続き受け取らない。 */
.pr__stage[data-mode="pick"] { cursor: default; overflow-y: auto; touch-action: pan-y; }
.pr__stage[data-mode="drag"] { cursor: default; }
.pr__stage[data-mode="carry"] { cursor: default; }

/* 的。★色ではなく形で意味を持たせる（実線の円＝いま押すもの） */
.pr__t {
  position: absolute; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--bg); cursor: pointer;
}
.pr__t::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
/* 制限時間つきのとき、残り半分で輪郭を破線に変える（減っていくバーは作らない＝26 第6条） */
.pr__t--half { border-style: dashed; }
/* むずかしい版の「押さない四角」。★色ではなく**形**で分ける（丸＝押す／四角＝押さない）。
   中心の点も出さない＝的の印は丸だけが持つ。 */
.pr__t--decoy { border-radius: 3px; cursor: crosshair; }
.pr__t--decoy::after { display: none; }

/* 押した所（実線の点）と、外した所（破線の丸）。1回分が終わるまで残る＝軌跡の代わりの記録。 */
.pr__mark { position: absolute; z-index: 1; width: 5px; height: 5px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); pointer-events: none; }
.pr__mark--miss { width: 18px; height: 18px; margin: -10px 0 0 -10px; background: none; border: 1px dashed var(--ink); }

/* なぞる */
.pr__svg { display: block; width: 100%; height: 100%; }
.pr__lane-edge { fill: none; stroke: var(--soft); stroke-linecap: round; stroke-linejoin: round; }
.pr__lane { fill: none; stroke: var(--bg); stroke-linecap: round; stroke-linejoin: round; }
.pr__guide { fill: none; stroke: var(--soft); stroke-dasharray: 4 6; }
.pr__end { fill: none; stroke: var(--ink); stroke-width: 1; }
/* ★2026-09-10 okada 指示「スタートの側が普通の線、ゴールが点線」。
   ★直す前は**逆**（`--start` が点線）だった。点線は「これから行くところ／ここに入れる」の印にする。
   ★`--start` は使わなくなった（なぞるは実線のまま、はこぶはスタートの丸を描かなくなった）。 */
.pr__end--goal { stroke-dasharray: 3 4; }
/* 盤面に置く字（スタート／ゴール）。★形の意味を覚えなくても分かるように、字で書く。
   ★`.pr__end-h` などは**結果の箱**の部品で別物。名前を分けてある。 */
.pr__sign { fill: var(--fg-muted); font: 600 11px/1 var(--font-ja); letter-spacing: .06em; text-anchor: middle; }
/* はこぶ の判定に使う細い道。★描かない（見えるのは通路そのものだけ）。
   `stroke: transparent` にしてあるのは、isPointInStroke が輪郭の形だけを見るため。 */
.pr__core { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; }

/* えらぶ */
.pr__rows { display: block; padding: 8px; }
.pr__row {
  display: flex; align-items: center; width: 100%; padding: 0 .9rem; margin: 0;
  border: 0; border-bottom: 1px solid var(--soft); background: var(--bg); color: var(--fg);
  font: 600 .9rem/1 var(--font-ja); letter-spacing: .04em; text-align: start; cursor: pointer;
}
.pr__row:first-child { border-top: 1px solid var(--soft); }
.pr__row--miss { border-bottom-style: dashed; color: var(--fg-muted); }

/* つかむ */
.pr__zone { position: absolute; border: 1px dashed var(--ink); border-radius: var(--r); }
.pr__box { position: absolute; margin: 0; padding: 0; border: 1px solid var(--ink); border-radius: 3px; background: var(--bg); cursor: grab; }
.pr__box--hold { background: var(--ink); cursor: grabbing; }

/* ---------- 切り替え台（型と設定の乗り換え・2026-09-06） ----------
   ★盤面の下と結果の下の2か所に出る。okada 依頼＝「つかむを終えたら、ほかの型もやりたくなる」を
   設定画面へ戻らせずに叶える。線は破線1本だけ（面を作らない＝26 第3・4条）。 */
.pr__switch { margin-block: 0 1.2rem; }
.pr__switch-h { margin: 0 0 .6rem; font: 700 .78rem/1 var(--font-ja); letter-spacing: .1em; color: var(--fg-muted); }
.pr__switch-h--sub { margin-top: .9rem; }
.pr__switch-btns { display: flex; flex-wrap: wrap; gap: .35rem; }
/* 段の下の1行。いま選んでいる段が何をするかを、押す前に出す */
.pr__switch-note { margin: .55rem 0 0; font-size: .78rem; line-height: 1.8; color: var(--fg-muted); }
/* 台は盤面の下にいつも出ている。上の破線1本だけで区切る */

/* ---------- 結果 ---------- */
.pr__result { margin-block: 1.4rem; }
.pr__said { font-weight: 700; margin-block: 0 1rem; }
.pr__said:focus { outline: none; }
.pr__rest { border: 1px solid var(--ink); border-radius: var(--r); padding: 1rem 1.1rem; margin-block: 1.2rem; }
.pr__rest p { margin: 0; }
.pr__result { border-bottom: 1px dashed var(--soft); padding-bottom: 1rem; }

/* ★線の引き分け（2026-09-07・okada 指摘「一番濃い線が表の一番下にしかない」）。
   直す前は**全部の罫が --soft**で、表の外周に墨の線が無かった＝どこからどこまでが表か出ていなかった。
   `26` 第3条の決め（本文の表と同じにする）:
     外枠 = 1px の墨（--ink）  … 「ここで領域が変わる」
     中の罫 = 1px の薄墨（--soft）… 「並んだものの区切り」 */
.pr__table { width: 100%; border-collapse: collapse; margin-block: 1rem; font-size: .86em;
  border: 1px solid var(--ink); }
.pr__table caption { text-align: start; font-size: .78rem; color: var(--fg-muted); padding-block: 0 .5rem; }
.pr__table th, .pr__table td { border: 0; border-bottom: 1px solid var(--soft); padding: .5rem .7rem; text-align: start; vertical-align: top; line-height: 1.75; letter-spacing: .02em; }
.pr__table tr > * + * { border-inline-start: 1px solid var(--soft); }
.pr__table tbody tr:last-child > * { border-bottom: 0; }   /* 最終行の下は外枠に任せる */
.pr__table thead th { background: var(--tint); font-weight: 700; }
.pr__table th[scope="row"] { font-weight: 600; color: var(--fg-muted); }
.pr__table td { font-variant-numeric: tabular-nums; }

.pr__log { border-top: 1px solid var(--ink); margin-block: 2.5rem; padding-top: 1.2rem; }
.pr__log-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .8rem .2rem; }
.pr__log-btns .pill { text-decoration: none; }

/* ---------- 狭い画面 ---------- */
/* ★集計表は5列ある。390px では1列 70px 前後＝1字で折り返す（24 §8-3 の実測）。
   本文の表と同じく**縦積み**にする。ただしこの表は JS が後から作るので、
   main.js の縦積み（.nm-stack）は掛からない ＝ ここで CSS だけで畳む。
   セルの見出しは JS が付けた data-label から出す。 */
@media (max-width: 47.99em) {
  .pr__opt { display: block; }
  .pr__opt-label { display: block; margin-bottom: .35rem; }
  /* ★2026-09-10 削除（実測）。ここに `.pr__stage{ height:300px }` があったが、
     **一度も効いていなかった**。practice.js の showLayer() が
     `stage.style.height = stageSize() + 'px'` を毎回インラインで書くため
     （狭い 260 ／ ふつう 340 ／ 広い 440。既定＝ふつう 340px）。
     ★盤面の高さを変えたいときは **JS の SPAN** を見ること。CSS では変わらない。 */
  /* ★設定の中だけは題を左に置いたまま（縦に伸ばさない）。
     ここが伸びると「この設定ではじめる」が画面の外へ出てしまう。 */
  .pr__set-body .pr__opt { display: flex; align-items: baseline; gap: .3rem .6rem; }
  .pr__set-body .pr__opt-label { display: block; min-width: 5.2em; margin-bottom: 0; font-size: .74rem; }

  .pr__table--log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  /* ★縦積みでは、1件ぶんの箱の外周が墨（本文の表の縦積みと同じ） */
  .pr__table--log { border: 0; }
  .pr__table--log tr { display: block; border: 1px solid var(--ink); margin-block: .8rem; }
  .pr__table--log tr > * + * { border-inline-start: 0; }
  .pr__table--log th[scope="row"] { display: block; border: 0; border-bottom: 1px solid var(--soft); background: var(--tint); color: var(--fg); font-weight: 700; }
  .pr__table--log td { display: flex; justify-content: space-between; gap: 1rem; border: 0; border-top: 1px dashed var(--soft); padding-block: .4rem; }
  .pr__table--log td::before { content: attr(data-label); flex: none; color: var(--fg-muted); font-size: .92em; font-weight: 600; }
}