/* ===========================================================================
   layout.css — ページ骨格(パケットL2)

   【このファイルが独立している理由】
   このテーマの他のCSSは「メディアクエリはファイル末尾に置く」という運用規約で
   動いている(過去に、前方に置いたクエリが同詳細度の後勝ちに負けて、モバイル
   対応が1ヶ月まるごと効いていなかった事故がある)。
   L2 でこのテーマに **初めて min-width クエリ** を導入するため、既存ファイルの
   末尾規約を壊さないよう、レイアウト用のクエリはこのファイルに閉じ込める。
   読み込み順は inc/assets.php の依存指定で pages.css の**後**にしている
   (骨格は最後に決まる)。

   【最初の実装の失敗と、その直し方】
   はじめは「1200px以上なら全ページ2カラム」という敷き方をした。これが誤りで、
     - 棚を出さないページ(/post/ /offline/ トップ等)にも空の右列が残り、
       本文が左に寄った
     - 中央に寄せて見せる設計のファーストビューまで左カラムへ押し込まれた
     - 横長で展開する前提の部品(お題バナー・耳くらべの入口)を、variant を
       付けただけでCSSを書かず 300px に流し込んだので、そのまま潰れた
   直し方は3つ:
     1. 棚を出すページは**許可リストで1つずつ選ぶ**(components.php)
     2. グリッドになるのは `.site-shell--with-rail` が付いたときだけ。
        付かないページは素の block = 従来と完全に同じ中央寄せ
     3. 棚に置く部品は**棚のために組み直す**(下の rail-* / --compact)

   【幅の設計】主カラムの幅は棚の有無で変えない。棚が付いた瞬間に本文が
   細くなると、ページを移るたびに読み幅が動いて落ち着かない。
     1448 − 320(棚) − 48(間) = 1080 = 従来の .container の上限
   =========================================================================== */

/* --------------------------------------------------------------------------
   スキップリンク
   このサイトには <main id="primary"> があるのに、そこへ飛ぶリンクが
   1つも無かった。ヘッダーのナビは最大9項目あり、キーボードだけで使う人は
   毎ページそれを踏破していた。
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  translate: -50% -200%;
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-clay);
  transition: translate 180ms var(--ease-spring);
}

/* 降りてくる条件は :focus-visible ではなく **:focus**。
   :focus-visible はブラウザの推測(直前の入力手段など)に依存するため、
   条件が外れると「フォーカスは当たっているのに画面外のまま」という
   いちばん困る状態 = 見えない要素にフォーカスが乗る罠 になる。
   このリンクは既定で画面外にあり、そもそもポインタでは当たらないので、
   :focus で出して困る場面が無い。 */
.skip-link:focus {
  translate: -50% 0;
}

.skip-link:focus-visible {
  outline: 3px solid var(--clay-orange-deep);
  outline-offset: 3px;
}

:root {
  /* .container の上限。この変数は .site-footer__inner が既に参照していたのに
     どこにも定義が無かった(常にフォールバックの1080pxが効いていた)。 */
  --container-max: 1080px;

  /* 棚の幅と、棚と本文のあいだ。 */
  --rail-width: 320px;
  --rail-gap: var(--space-7);
}

/* --------------------------------------------------------------------------
   めぐる棚(サイドレール)

   DOM順は <main> の後ろ。読み上げとモバイルでは本文が先に来て、
   広い画面でだけ grid の配置で右へ回す。
   -------------------------------------------------------------------------- */
/* 余白は本文より一段詰める。棚は「読み物」ではなく「行き先の一覧」なので、
   本文と同じゆったりした余白を与えると、画面に収まらなくなって
   sticky が使えなくなる(実測: 余白を本文と揃えたら868pxになり、
   900px の画面に収まらなかった)。 */
.side-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.side-rail:empty {
  display: none;
}

.side-rail__block {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-clay);
  box-shadow: var(--shadow-clay);
}

.side-rail__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.side-rail__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .18;
}

/* --- 棚のランキング抜粋 ------------------------------------------------- */
.rail-rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail-rank__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.rail-rank__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rail-rank__link {
  flex: 1;
  min-width: 0; /* 長い曲名で親を押し広げない */
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 44px;
  justify-content: center;
  padding: var(--space-1) 0;
  color: inherit;
  text-decoration: none;
}

/* 名前は2行まで見せる。1行に詰めて三点リーダーにすると、狭い棚では
   どの曲か分からなくなる(省略記号に頼らない)。 */
.rail-rank__name {
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.rail-rank__meta {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-rank__link:hover .rail-rank__name,
.rail-rank__link:focus-visible .rail-rank__name {
  text-decoration: underline;
}

.rail-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}

.rail-more::after {
  content: "→";
  transition: translate 180ms var(--ease-spring);
}

.rail-more:hover::after,
.rail-more:focus-visible::after {
  translate: 4px 0;
}

/* --- 棚のチップ列 -------------------------------------------------------- */
.side-rail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- 棚に置くときのお題バナー(横長版を縦に組み直す)--------------------

   お題バナーは本来「横長の帯」で、絵文字・見出し・リード・件数・CTAが
   横に並ぶ前提で作られている。それを 320px にそのまま流し込むと縦に
   積み上がって背が高くなり、棚が1ブロックで埋まってしまう(実測320px)。
   棚では**要点だけ**にする: 絵文字 + 見出し + 一言 + 行き先。
   -------------------------------------------------------------------------- */
.side-rail .theme-banner--rail {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.side-rail .theme-banner--rail .theme-banner__emoji {
  font-size: 1.75rem;
  width: auto;
  height: auto;
}

.side-rail .theme-banner--rail .theme-banner__body {
  min-width: 0;
}

.side-rail .theme-banner--rail .theme-banner__title {
  font-size: var(--text-lg);
  line-height: 1.35;
  margin: 0;
}

.side-rail .theme-banner--rail .theme-banner__lead {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 帯として読ませるための飾りは、棚では落とす。
   (見出しの上のラベルと、件数の一文。棚では見出しが既に文脈を持つ) */
.side-rail .theme-banner--rail .theme-banner__eyebrow,
.side-rail .theme-banner--rail .theme-banner__count {
  display: none;
}

.side-rail .theme-banner--rail .theme-banner__actions {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}

.side-rail .theme-banner--rail .theme-banner__go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --- 棚に置くときの耳くらべ入口(横並び→縦組み)------------------------ */
.side-rail .play-invite--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "mark body"
    "go   go";
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.side-rail .play-invite--compact .play-invite__mark {
  grid-area: mark;
  font-size: 1.5rem;
}

.side-rail .play-invite--compact .play-invite__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.side-rail .play-invite--compact .play-invite__body small {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* 横長版では右端にあった矢印。狭い棚では下の行へ回して、
   押せる帯として横いっぱいに置く。 */
.side-rail .play-invite--compact .play-invite__go {
  grid-area: go;
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   ペアカードの一覧を横に並べる

   実測: 修正前は1440px幅で1枚が横1080px・高517px、12枚で縦8033px。
   1画面に1.5枚しか入らず、横幅が完全に遊んでいた。
   auto-fill なので幅が足りなければ自動で1列に戻る。下限420pxは、カードの中の
   共鳴弦キャンバスが潰れない幅として実測で決めている(過去に390px幅で
   canvas が14pxまで潰れ「はじけない」事故があったため、ここは必ず
   getComputedStyle の実測で確認する)。

   棚の有無に関係なく効く(棚が無いページの一覧も横に広がってよい)。
   -------------------------------------------------------------------------- */
@media (min-width: 1180px) {
  .pair-feed {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    align-items: start;
  }

  /* インフィード広告は行の途中に割り込ませない(2列だと片側だけ広告に
     なって列が崩れる)。1行まるごと使い、読み終わりの区切りとして置く。 */
  .pair-feed > .ad-in-feed {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   棚があるページだけグリッドにする
   -------------------------------------------------------------------------- */
@media (min-width: 1240px) {
  .site-shell--with-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--rail-gap);
    width: min(100% - var(--space-5) * 2, 1448px);
    margin-inline: auto;
    align-items: start;
  }

  /* 主カラムの中では .container の中央寄せ・上限を解除する
     (幅は主カラム自身が決める。二重に中央寄せしない)。 */
  .site-shell--with-rail > main .container {
    width: 100%;
  }

  /* ページの主役として中央に置きたいセクションは、棚があっても
     読み幅の中央へ戻す。1カラム/2カラムを機械的に決めず、
     セクション単位で選べるようにするための逃げ道。 */
  .site-shell--with-rail > main .section--full {
    max-width: var(--container-max);
    margin-inline: auto;
  }

}

/* 棚を画面に留める(sticky)のは、**画面に収まるときだけ**。

   最初は max-height + overflow-y:auto を付けたが、中身(実測976px)が
   高さ(804px)を超えて**棚の中に内部スクロールバーが出た**。サイドバーの
   中のスクロールは気づかれず、下のブロックが読まれないまま終わる。
   内部スクロールは作らず、収まる高さがあるときだけ留める。
   収まらない画面では普通に本文と一緒に流れる(何も失われない)。 */
@media (min-width: 1240px) and (min-height: 820px) {
  .side-rail {
    position: sticky;
    top: calc(var(--space-7) + 44px); /* 浮遊ヘッダーの下に収まる位置 */
  }
}

/* 棚が出るには狭い画面(および棚を出さないページ)では、
   棚は本文の後ろに普通のブロックとして流れる。
   ページ末尾にはこれまで何も無かったので、ここが回遊の受け皿になる。 */
@media (max-width: 1239px) {
  .side-rail {
    width: min(100% - var(--space-5) * 2, var(--container-max));
    margin: 0 auto var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .rail-more::after {
    transition: none;
  }
}