/* マニュアルページ専用。styles.css を読み込んだ上に重ねる。 */

.manual {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 96px;

  /* アプリごとの色は styles.css のトークンから引く。
     --app は文字用の段なので、ライトでは暗く・ダークでは明るくなり、
     どちらのテーマでも本文背景に対して読める。 */
  --app: var(--accent);
  --app-subtle: var(--accent-subtle);
  --app-solid: var(--accent);
}
.manual--scriptnest { --app: var(--scriptnest); --app-subtle: var(--scriptnest-subtle); --app-solid: var(--scriptnest-solid); }
.manual--boardnest  { --app: var(--boardnest);  --app-subtle: var(--boardnest-subtle);  --app-solid: var(--boardnest-solid); }
.manual--pipenest   { --app: var(--pipenest);   --app-subtle: var(--pipenest-subtle);   --app-solid: var(--pipenest-solid); }

.eyebrow--app { color: var(--app); }

/* そのアプリを開くボタンだけは、傘の色ではなくアプリ自身の色で塗る。
   隣の「質問する」はコミュニティ（3アプリ共通）へ行くので傘の色のまま。 */
.manual .btn--app { background: var(--app-solid); color: var(--accent-ink); }
.manual .btn--app:hover { filter: brightness(1.08); }

.crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }
.crumbs a:hover { text-decoration: underline; color: var(--ink); }
.crumbs span { margin: 0 6px; }

.manual__hero { padding-bottom: 8px; max-width: 760px; }

.manual__title { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.manual__title .applogo { --logo-size: 56px; }
.manual__title h1 { margin: 6px 0 0; }

.manual__lead { margin-top: 20px; }
.manual__meta { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.manual__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* =========================================================================
   本文 + 左インデックスの2カラム
   ========================================================================= */
.manual__layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 56px;
}

.manual__content { min-width: 0; }

/* ---- 左インデックス ----
   章が6つ・項目が最大34あるので、画面より長くなったら中だけスクロールさせる。 */
/* 目次を画面に貼り付ける。
   sticky は「自分が動ける余地」がある親の中でしか効かない。グリッドが
   align-items:start なので <aside> は中身ぶんの高さしか持たず、内側の要素に
   sticky を付けても即座に流れてしまう。グリッド項目である <aside> 自身に
   付けると、親（本文と同じ高さのグリッド）を基準に貼り付く。 */
.mnav {
  position: sticky;
  top: 88px;
  align-self: start;
}

/* 目次が画面より長いときは、この中だけをスクロールさせる。 */
.mnav__inner {
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  border-left: 1px solid var(--line);
}

.mnav__title {
  margin: 0 0 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mnav__list { list-style: none; margin: 0; padding: 0; }
.mnav__chapter + .mnav__chapter { margin-top: 4px; }

.mnav__chapter-link {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0 7px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.mnav__chapter-link:hover { color: var(--app); }

.mnav__n {
  flex: none;
  min-width: 1.2em;
  color: var(--app);
  font-variant-numeric: tabular-nums;
}

.mnav__items { list-style: none; margin: 0 0 6px; padding: 0; }
.mnav__items a {
  display: block;
  padding: 5px 0 5px 40px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.mnav__items a:hover { color: var(--ink); }

/* 読んでいる位置。manual.js が付ける。JS が無くても目次自体は使える。 */
.mnav a.is-current {
  border-left-color: var(--app);
  color: var(--app);
  font-weight: 700;
}

/* 項目を読んでいるあいだ、属する章はこちらで控えめに示す。 */
.mnav a.is-current-chapter { color: var(--app); }

/* =========================================================================
   章と項目
   ========================================================================= */
.mchapter { scroll-margin-top: 88px; }
.mchapter + .mchapter { margin-top: 72px; padding-top: 8px; }

.mchapter__title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(21px, 2.6vw, 26px);
  margin: 0;
  line-height: 1.5;
}

.mchapter__n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--app-subtle);
  color: var(--app);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}

.mchapter__intro {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 18px 0 0;
  text-wrap: pretty;
}

.mgroup { margin-top: 40px; }

.mgroup__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.mstep { padding-top: 32px; scroll-margin-top: 88px; }

.mstep__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

/* 見出しにホバーしたときだけ出るアンカーリンク。 */
.mstep__anchor {
  flex: none;
  color: var(--ink-soft);
  opacity: 0;
  font-size: 14px;
  transition: opacity .12s ease;
}
.mstep__title:hover .mstep__anchor,
.mstep__anchor:focus-visible { opacity: 1; }

.mstep__body {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 10px 0 0;
  text-wrap: pretty;
}

/* ---- 図 ---- */
.mfig { margin: 20px 0 0; }
/* 元の画素数を超えて引き伸ばさない。
   手順の画像は画面全体のものと、ダイアログだけを切り取った小さなものが混在していて、
   幅いっぱいに広げると後者がぼやける（狭いものは 268px しかない）。
   width:auto で実寸に置き、本文幅を超えるものだけ max-width で縮める。 */
.mfig img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-bg);
}
.mfig figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.manual__end {
  margin-top: 88px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* =========================================================================
   狭い画面: 目次を本文の上に畳んで置く
   ========================================================================= */
@media (max-width: 960px) {
  .manual__layout { grid-template-columns: 1fr; gap: 32px; }

  .mnav { position: static; }
  .mnav__inner {
    max-height: none;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
  }
  .mnav__title { margin-left: 0; }
  .mnav__chapter-link, .mnav__items a { padding-left: 0; border-left: 0; }
  .mnav__items a { padding-left: 24px; }
  .mnav a.is-current { border-left: 0; }

  /* 項目まで出すと長くなりすぎるので、狭い画面では章だけにする。 */
  .mnav__items { display: none; }
}

@media (max-width: 720px) {
  .manual { padding: 32px 18px 72px; }
  .mchapter + .mchapter { margin-top: 56px; }
  .mstep { padding-top: 28px; }
  /* タッチ環境ではホバーが無いので、アンカーは常時うっすら出す。 */
  .mstep__anchor { opacity: .4; }
}