/* SubPro — 「ひとつのライブラリ、入口は五つ」(/organize, /organize-ja) と、全機能ページの入口。lp2.css の上に重ねる。
   色の決まりは lp2.css と同じ: 色を持つのは指導者のサイトの画面の中だけ。枠・見出し・ボタンは無彩色。 */

/* ── 実際の画面を何枚か重ねて、下のボタンで切り替える ── */
.shots { display: grid; gap: 22px; justify-items: center; }
.shots .browser-view { background: #f4f4f6; }
.shots .browser-view img { opacity: 0; transition: opacity 0.6s var(--ease); }
.shots .browser-view img.on { opacity: 1; }
.shots .chips { counter-reset: step; }
.shots .chip { display: inline-flex; align-items: center; gap: 8px; }
.shots .chip::before { counter-increment: step; content: counter(step); font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.shots .chip[aria-pressed="true"]::before { color: #b0b0b5; }
/* 画面が主役のページなので、枠は本文の幅いっぱいまで使う (lp2 の --art-w で縮めない) */
.shots { width: 100%; }
/* スマホではスマホ幅の実画面に差し替える (<picture> の source)。枠もその縦横比に */
@media (max-width: 640px) {
  .shots { width: min(340px, 100%); }
  .shots .browser-view { aspect-ratio: 390 / 760; }
  .shots .browser-bar .url { transform: none; }
}
.stage .art > .art-cap { margin-top: 18px; }

/* 本文の中の控えめなリンク */
.note a.in { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.note a.in:hover { text-decoration-color: var(--ink); }

/* ── ページの頭: 五つの入口への目次 ── */
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.toc a { text-decoration: none; color: var(--ink); border: 1px solid var(--rule); border-radius: 980px; padding: 8px 16px; font-size: 14px; background: #fff; }
.toc a:hover { border-color: var(--ink); }
.toc a:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.toc a b { font-weight: 600; margin-right: 6px; color: var(--faint); }


/* 全機能ページの入口: 五つの入口の実画面が自動で順に替わる。枠ごと押せる。ここだけは他の節の絵と幅を揃える */
.stage .art > .shots.fit { max-width: var(--art-w); }
.shots-go { display: block; width: 100%; text-decoration: none; color: inherit; border-radius: 14px; transition: transform 0.3s var(--ease); }
.shots-go:hover { transform: translateY(-4px); }
.shots-go:focus-visible { outline: 2px solid #0071e3; outline-offset: 6px; }

/* ページ丸ごとの縦長スクショを、枠の中でスクロールして見せる (lp2 の「枠いっぱいに切り抜く」指定を外す) */
.shots .browser-view.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f6f5f2; }
/* PC だけ、枠の端まで来てもページごと動かさない。スマホでは指が枠に捕まるので付けない */
@media (min-width: 641px) { .shots .browser-view.scroll { overscroll-behavior: contain; } }
.shots .browser-view.scroll img { position: static; display: none; width: 100%; height: auto; opacity: 1; object-fit: fill; transition: none; }
.shots .browser-view.scroll img.on { display: block; }
.shots .browser-view.scroll:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }