/* =========================================================
   農業経営学ポータル ― 2ペイン（左:目次レール / 右:本文）アドオン
   既存のインライン <style>（Satoyama Green）に対する純粋な追加。
   .wrap が直下に .toc を持つときだけ発火（:has）。1024px 未満は従来の単一カラム。
   ※ レール配色は下の --rail-* だけで制御（他ポータルへ移植する際はここを差し替える）。
   ========================================================= */

.wrap:has(> .toc) {
  --rail-surface: var(--surface);
  --rail-border: #BBF7D0;
  --rail-tint: #DCFCE7;            /* hover / active の地色 */
  --rail-accent: var(--forest);   /* active の左ボーダー */
  --rail-accent-text: var(--canopy);
  --rail-link: var(--muted-strong);
}

@media (min-width: 1024px) {
  .wrap:has(> .toc) {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 54px;
    max-width: 1200px;
    align-items: start;
  }
  /* 目次以外の直下要素はすべて右カラムへ */
  .wrap:has(> .toc) > * { grid-column: 2; min-width: 0; }

  /* 左レール：全行にまたがらせて sticky で追従させる */
  .wrap:has(> .toc) > .toc {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 18px;
    margin: 24px 0;
    padding: 18px 18px 20px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rail-border) transparent;
  }
  .wrap:has(> .toc) > .toc::-webkit-scrollbar { width: 8px; }
  .wrap:has(> .toc) > .toc::-webkit-scrollbar-thumb { background: var(--rail-border); border-radius: 8px; }

  /* レール内の目次リストは1カラム＋スクロールスパイ */
  .wrap:has(> .toc) > .toc ol { grid-template-columns: 1fr; gap: 1px; }
  .wrap:has(> .toc) > .toc ol a {
    padding: 7px 12px;
    border-left: 2px solid transparent;
    border-radius: 0 7px 7px 0;
    font-size: 13px; line-height: 1.5;
    color: var(--rail-link);
    transition: background .14s, color .14s, border-color .14s;
  }
  .wrap:has(> .toc) > .toc ol a:hover {
    background: var(--rail-tint); color: var(--rail-accent-text); border-left-color: var(--rail-border);
  }
  .wrap:has(> .toc) > .toc ol a.active {
    background: var(--rail-tint); color: var(--rail-accent-text);
    font-weight: 700; border-left-color: var(--rail-accent);
  }
}

/* ===== 「ポータルに戻る」ボタン（rail.js がレール先頭へ挿入） ===== */
.toc .rail-back {
  display: inline-flex; align-items: center; gap: 7px;
  width: 100%; margin: 0 0 14px; padding: 9px 12px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--rail-accent-text); text-decoration: none;
  background: var(--rail-tint);
  border: 1px solid var(--rail-border); border-radius: 9px;
  transition: background .14s, border-color .14s;
}
.toc .rail-back:hover { background: var(--rail-surface); border-color: var(--rail-accent); }
.toc .rail-back i { width: 15px; height: 15px; flex-shrink: 0; }

/* ===== ダークモード（レール配色のみ調整） ===== */
@media (prefers-color-scheme: dark) {
  .wrap:has(> .toc) {
    --rail-border: #2E4A3B;
    --rail-tint: #1F3A2B;
    --rail-accent: var(--field);
    --rail-accent-text: #95D5B2;
  }
}