/* ============================================================
   Auguri! ─ 右レール（縦罫・縦書きのタグライン・Location ボタン）
   ------------------------------------------------------------
   2026-09-16 高野様
     「画面右の文章とロケーションボタンを、スクロールしても常に表示するように（背景によって色を反転）」
     「罫線はフッター上まで伸ばし、フッターでとまるようにして」

   それまでは、ヒーロー帯（0–1280）の中の飾りだったので、少し下へスクロールすると消えていた。
   ・レールを帯から出し、<main class="page"> の直下の「層」にした（build/gen.py の RailLayer）
   ・層の高さ＝フッターの天井（--railwrap-h）。同じだけ負のマージンを当てるので、
     後ろの帯の位置は 1px も動いていない
   ・縦罫はその層の高さいっぱい ＝ ページの先頭からフッターの手前まで。フッターでは消える
   ・タグライン・Location・ピンは position:sticky で画面に貼り付き、
     層の底（＝フッターの天井）で止まって流れていく

   ── 色の反転について ──
   濃い帯（#37332f・#262722・#939a8d・FV）では白、淡い帯では黒。
   ただしタグラインは 500px と背が高く、帯の境目をまたぐ。まとまりごと 1 色で塗ると、
   境目の前後で「白い文字が白い面に乗る」瞬間が出る。
   そこで **白い写しを重ね、濃い帯の範囲だけを見せる**（clip-path）。
   境目は帯の縁と 1px の狂いもなく一致し、またいでいる間も両側が読める。
   縦罫も同じ考え方で、濃い帯のところだけ白くなる 1 本のグラデーションにしている。
   範囲は assets/js/rail.js が測って CSS 変数に入れる。JS が動かない環境では、
   生成 CSS のページごとの既定色（TOP は白・下層は黒）のまま静かに出る。

   位置（left・幅・字送り）は ai 実測のまま。変えたのは「縦のどこに置くか」と「色」だけ。
   ============================================================ */

.railwrap {
  position: relative;
  /* 1920px より広い画面では、帯の中身（.band__in）と同じく 1920 の版面の中に置く（2026-09-22） */
  width: calc(1920 * var(--s)); max-width: 100%; margin-inline: auto;
  height: calc(var(--railwrap-h) * var(--s));
  margin-bottom: calc(var(--railwrap-h) * var(--s) * -1);
  z-index: 5;                 /* 帯より前・ヘッダー（7）より後ろ */
  pointer-events: none;
}

/* ── 縦罫：層いっぱい（ページの先頭 → フッターの天井） ── */
.railwrap .rail--line { position: absolute; inset: 0; }
.railwrap .rail__line {
  top: 0 !important; height: 100% !important;
  /* 太さは全ページで 0.5px の毛筋に揃える（ai は TOP だけ 0.16px×不透明度 16% で、
     ほとんど見えなかった。ページを貫く線になったので、どのページでも同じ細さにする） */
  width: calc(1 * var(--s)) !important; transform: scaleX(.5) !important; transform-origin: 0 0 !important;
  opacity: 1 !important;
  /* 既定は淡い面の色。JS が濃い帯の範囲を硬い境目のグラデーションで差し込む */
  background: var(--rail-line, rgba(0, 0, 0, .45)) !important;
}
.railwrap.is-inv-line .rail__line { background: var(--rail-line) !important; }

/* ── タグライン・Location・ピン：画面に貼り付く ──
   ai の版面（高さ 1280）を画面の高さに合わせて上下中央に置く。
   画面が 1280 のときは ai と 1px も違わない。狭い画面ではその差の半分だけ上に寄る
   （1080 で 100px・900 で 190px。ピンは画面内に収まる）。 */
/* フッターが近づいたら、流れていく前に **ふっと消える**（2026-09-16 高野様ご指示）。
   濃さは assets/js/rail.js が --rail-fade に入れる（フッターの天井が画面に入り始めたら薄くなり、
   画面の高さの 72% まで上がったところで完全に消える）。 */
.railwrap .rail__stick { position: sticky; top: 0; height: 100vh; opacity: var(--rail-fade, 1); }
.railwrap .rail--stack { position: absolute; inset: 0; }
.railwrap .rail--stack > * { margin-top: calc((100vh - 1280 * var(--s)) / 2); }

/* 下に敷くのは黒。生成 CSS の色（TOP は白）より詳細度が高いので、順番に関係なく勝つ。
   ただし **白い写しが作られたときだけ** 当てる（.is-inv は rail.js が付ける）。
   JS が動かない環境でこれを当ててしまうと、TOP の濃いヒーロー帯で
   「黒い文字が黒い面に乗る」ことになる（2026-09-17・中間レビュー R05）。 */
.railwrap.is-inv .rail--stack:not(.rail--inv) .rail__tag,
.railwrap.is-inv .rail--stack:not(.rail--inv) .rail__loc { color: var(--c-ink); }

/* 上に重ねる白い写し。濃い帯の範囲だけを見せる（既定は全部隠す） */
.railwrap .rail--inv {
  clip-path: inset(var(--inv-t, 100%) 0 var(--inv-b, 100%) 0);
  pointer-events: none;
}
.railwrap .rail--inv .rail__tag,
.railwrap .rail--inv .rail__loc { color: var(--c-ink-w); }
/* ピンは ai の中で色が塗られた SVG なので、明暗を反転させる（黒いピン → 白いピン） */
.railwrap .rail--inv .rail__pin { filter: invert(1); }

/* 押せるのはリンク（Location の文字とピン）だけ。縦罫とタグラインは素通し */
.railwrap .rail--stack > * { pointer-events: none; }
.railwrap .rail--stack:not(.rail--inv) .rail__loc,
.railwrap .rail--stack:not(.rail--inv) .rail__pin { pointer-events: auto; }

/* ── 消えきったら、押せもしないし Tab でも止まらない（2026-09-17・中間レビュー R03） ──
   薄さ（--rail-fade）だけでは、透明になった Location リンクとピンが操作対象に残り、
   見えない場所にフォーカス枠が入ってしまう。完全に消えたところで visibility を切る
   （visibility:hidden は Tab 順からもポインタからも外れる）。
   .is-gone は assets/js/rail.js が付ける。
   ただし **すでにフォーカスが入っている間は見える状態に戻す**。
   Location にフォーカスしたままスクロールしても、行き先を見失わない。 */
.railwrap.is-gone .rail__stick { visibility: hidden; }
.railwrap.is-gone:focus-within .rail__stick { visibility: visible; opacity: 1; }
.compare .railwrap.is-gone .rail__stick { visibility: visible; }

/* ai 突き合わせ（.compare）では ai と同じ位置・同じ色に戻して測る。
   ずれているのは「縦のどこに置くか」と「色」だけなので、これで元の値に戻る。 */
.compare .railwrap .rail__stick { position: static; height: auto; }
.compare .railwrap .rail--stack > * { margin-top: 0; }
.compare .railwrap .rail--inv { display: none; }