/* バージョン＆最新機能（右下の入口 → 更新履歴のダイアログ）
   ─────────────────────────────────────────────
   app.css は科目一覧の担当ファイルなので、ここは混ぜない。
   色・間隔・角丸・モーションは tokens.css の変数だけを使う
   （ダークモードは変数側が面倒を見る）。

   置き場所の決めごと：
   ・右下に固定。下中央の「口コミを書く」FAB（app.css .fab、1024px 未満で出る）
     とは横にずらして、指の当たりを分ける
   ・狭い画面は丸バッジ（版番号だけ）、700px からは横長のピル。
     一覧の右下を大きく塞がないため
   ・z-index は FAB と同じ 20。口コミのシート（z-30）が開いたら
     その幕の下へ潜る ―― 上に浮いたままだと、閉じるボタンと競合する */

.verFab{position:fixed;z-index:20;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  width:52px;height:52px;padding:0;border-radius:var(--r-pill);
  background:var(--card);color:var(--brand-text);border:1px solid var(--rule);
  font:inherit;font-size:var(--fs-xs);font-weight:700;line-height:1;
  cursor:pointer;box-shadow:0 6px 20px var(--shadow-fab);
  transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.verFab:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.verFab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.verFabNum{font-family:var(--data)}
/* 狭い画面は丸バッジ。文言は aria-label 側に入っているので、
   読み上げには「バージョン＆最新機能」が届く。 */
.verFabTxt{display:none}

/* 未読の点。数ではなく「何かある」だけを伝えるので、
   読み上げからは外す（aria-hidden は HTML 側）。 */
.verDot{position:absolute;top:-1px;right:-1px;width:11px;height:11px;
  border-radius:var(--r-pill);background:var(--brand);
  border:2px solid var(--card)}

@media (min-width:700px){
  .verFab{width:auto;height:auto;padding:10px 16px;font-size:var(--fs-sm)}
  .verFabTxt{display:inline}
}

/* ── 更新履歴のダイアログ ─────────────────
   意見箱（feedback.css）と同じ作法：モバイルは下から、PC は中央。
   <dialog> なのは ESC で閉じる・背後にフォーカスを漏らさないを自前で書かないため。 */
.verDlg{border:none;padding:0;background:none;max-width:none;max-height:none;
  width:100%;height:100%;margin:0}
.verDlg::backdrop{background:var(--scrim)}
.verDlg[open]{display:flex;align-items:flex-end;justify-content:center}
.verCard{background:var(--card);color:var(--ink);width:100%;max-width:560px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px var(--pad) 24px;
  max-height:86vh;overflow:auto;font-size:var(--fs-base)}

.verHead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.verHead h2{margin:0;font-size:var(--fs-lg)}
.verClose{background:none;border:none;color:var(--muted);font:inherit;
  font-size:var(--fs-lg);line-height:1;padding:var(--sp-1);cursor:pointer;flex:none}
.verNow{margin:var(--sp-1) 0 var(--sp-4);font-size:var(--fs-sm);color:var(--muted)}

.verList{list-style:none;margin:0;padding:0}

/* ── 最新版 ─────────────────────────────
   開いた瞬間に目に入るのはここだけ。過去の版は下で1行に畳む。 */
.verRelHead{display:flex;align-items:center;gap:var(--sp-2)}
.verDate{font-family:var(--data);font-size:var(--fs-sm);color:var(--soft);font-weight:700}
.verVer{font-family:var(--data);font-size:var(--fs-xs);font-weight:700;
  color:var(--brand-text);background:var(--brand-soft);
  border-radius:var(--r-pill);padding:2px 8px}
/* NEW は「押せるもの」ではないが、ここだけはブランドの面を使う。
   未読の点と同じ意味を、開いた先で受け止めるため。 */
.verNew{font-family:var(--data);font-size:var(--fs-xs);font-weight:700;
  color:var(--brand-ink);background:var(--brand);
  border-radius:var(--r-pill);padding:2px 8px;letter-spacing:.04em}
.verRelTitle{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-base)}

/* ── 主打カード ─────────────────────────
   版ごとに1〜3枚だけ（tools/test_version.mjs が件数を見張っている）。
   ここを「一目で読める塊」に保つことが、この画面の全部。
   枚数が少ないので横に並べず、常に縦積み ―― 3枚を横に割ると
   1枚あたりが痩せて、結局また小さい字の一覧になる。 */
.verHeads{list-style:none;margin:0 0 var(--sp-4);padding:0;
  display:grid;gap:var(--sp-2)}
.verHeadItem{display:flex;align-items:flex-start;gap:var(--sp-3);
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:var(--sp-3)}
.verIcon{flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-md);
  background:var(--brand-soft);color:var(--brand-text)}
/* 線画のみ・単色。塗りと階調を持たせない（ブランドは単色） */
.verIcon svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.verHeadBody{min-width:0}
.verHeadTitle{display:block;font-size:var(--fs-base);font-weight:700;
  line-height:1.45;color:var(--ink)}
.verHeadText{display:block;margin-top:2px;font-size:var(--fs-sm);
  line-height:1.6;color:var(--soft)}
/* 画面写真（img）。リンクで飛んでも見えない機能を、その場で見せる */
.verHeadImg{display:block;width:100%;height:auto;margin-top:var(--sp-2);
  border:1px solid var(--rule);border-radius:var(--r-md)}

/* ── 畳んだ一覧（新しい機能 / 改善 / 直した不具合）───
   既定は閉じたまま。<details> なので開閉の JS は要らず、
   キーボードと読み上げは最初から通る。 */
.verGroup{border-top:1px solid var(--rule)}
.verGroupSum{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) 0;cursor:pointer;list-style:none;
  font-size:var(--fs-sm);font-weight:700;color:var(--soft)}
.verGroupSum::-webkit-details-marker{display:none}
/* 三角は CSS で作る（文字だと字体によって大きさが揃わない）。
   過去の版の行（.verOldSum）にも同じものを付ける ――
   押せると見た目でわからない畳みは、誰にも開かれない。 */
.verGroupSum::before,.verOldSum::before{content:"";flex:none;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform var(--dur) var(--ease-out)}
.verGroup[open] > .verGroupSum::before,
.verOld[open] > .verOldSum::before{transform:rotate(90deg)}
.verOldSum::before{color:var(--muted)}
.verGroupSum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.verGroupNum{font-family:var(--data);font-size:var(--fs-xs);color:var(--muted);
  background:var(--dim);border-radius:var(--r-pill);padding:1px 7px}

/* 畳みの中は tag ごとに分かれているので、項目側にタグは付けない
   （見出しと同じ語を全行に繰り返さない）。
   代わりに1件を「太字の見出し＋弱い色の説明」の2段に組む ――
   開いた人は全部を読まず、太字だけを縦に拾って自分に関係あるかを決める。
   ここを1段の文にすると、畳みの中がまた流し書きに戻る。 */
.verItems{list-style:none;margin:0;padding:0 0 var(--sp-3)}
.verItem{position:relative;margin-top:var(--sp-3);padding-left:var(--sp-4)}
/* 見出しの行頭にだけ点を置く。説明の行には置かない（2段が1件だとわかるように） */
.verItem::before{content:"";position:absolute;left:3px;top:.5em;
  width:5px;height:5px;border-radius:var(--r-pill);background:var(--brand)}
.verItemLead{display:block;font-size:var(--fs-sm);font-weight:700;
  line-height:1.5;color:var(--ink)}
.verItemText{display:block;margin-top:1px;font-size:var(--fs-sm);
  line-height:1.65;color:var(--soft)}

/* ── 「見てみる →」──────────────────────
   増えた機能を、読んだその場で見に行ける口。
   ボタンにはしない ―― 版の中に押せる面が増えると、主打カードが埋もれる。 */
.verJump{display:inline-flex;align-items:center;gap:var(--sp-1);
  margin-top:var(--sp-1);font-size:var(--fs-sm);font-weight:700;
  color:var(--brand-text);text-decoration:none}
.verJump[hidden]{display:none}   /* 飛び先が無いときは出さない（version.js が開くたびに見直す） */
.verJump:hover{text-decoration:underline}
.verJump:focus-visible{outline:2px solid var(--brand);outline-offset:2px;
  border-radius:var(--r-xs)}
.verJumpArrow{transition:transform var(--dur) var(--ease-out)}
.verJump:hover .verJumpArrow{transform:translateX(2px)}
.verHeadBody .verJump{margin-top:var(--sp-2)}

/* 飛んだ先を一瞬だけ囲む。押した人が「どこに来たか」を見失わないため。
   1.6 秒で JS が class を外す。 */
.verFlash{animation:verFlashRing 1.6s var(--ease-out) both;border-radius:var(--r-md)}
@keyframes verFlashRing{
  0%{outline:3px solid transparent;outline-offset:4px}
  20%,65%{outline:3px solid var(--brand);outline-offset:4px}
  100%{outline:3px solid transparent;outline-offset:4px}
}
/* 動きを減らす設定では光らせず、同じ時間だけ静かに囲む */
@media (prefers-reduced-motion:reduce){
  .verFlash{animation:none;outline:3px solid var(--brand);outline-offset:4px}
}

/* ── 過去の版 ───────────────────────────
   1版＝1行。開くと中身は最新版と同じ形（主打カード＋畳み）。 */
.verPast{margin:var(--sp-5) 0 0}
.verPastTitle{margin:0;font-size:var(--fs-xs);font-weight:700;
  color:var(--muted);letter-spacing:.04em}
.verRelOld{border-top:1px solid var(--rule)}
.verOldSum{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) 0;cursor:pointer;list-style:none}
.verOldSum::-webkit-details-marker{display:none}
.verOldSum:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.verOldTitle{min-width:0;font-size:var(--fs-sm);color:var(--soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verOldBody{padding-bottom:var(--sp-2)}
/* 畳みの中の畳み。入れ子だとわかるように、左に罫を1本入れる。 */
.verOldBody .verGroup{border-top:none}
.verOldBody .verHeads{margin-bottom:var(--sp-3)}

.verMore{margin:var(--sp-5) 0 0;font-size:var(--fs-sm)}
.verMore a{color:var(--brand-text);font-weight:600}

@media (min-width:700px){
  .verDlg[open]{align-items:center}
  .verCard{border-radius:var(--r-lg);max-height:80vh}
}

/* スマホの絞り込みシートを開いているあいだは、シートの「結果を見る」と重なるので隠す */
html.fsOn .verFab{visibility:hidden}