/* Academic Gates — 教材ページ用のテーマ上書き
 * 各教材の <style> の「後」に読み込むこと。
 * 教材側の :root にある色トークンを、ライト時だけ差し替える。
 *
 * ★★ 重要: このファイルは「ライト専用」ではない。★★
 * ライト/ダークの切替自体は停止中（DESIGN.md §44）。html 側で js/theme.js の
 * 読み込みをコメントアウトしてあるので data-theme が付かず、下の
 * :root[data-theme="light"] ブロックは現在いっさいマッチしない。
 * だが **このファイルを外すとダークが壊れる**。ダーク側 :root の
 *   --ink / --line / --line-strong / --on-accent / --footer-bg / --rail-bg / color-scheme
 * は記事の <style> にも style.css にも無く、ここにしか定義が無い。特に --line が
 * 未定義になると border:1px solid var(--line) が currentColor（＝白）に落ちて、
 * 記事中のヘアラインが全部「不透明な白線」になる。footer / .prompt /
 * .footer-tagline / 900px 以下の .rail / @media print も、スコープ無しで
 * ダークに効いている。整理するときは §44.1 の分類表を読むこと。
 *
 * 教材ページ専用。本体6ページには読み込ませない（DESIGN.md §20.4）。
 * ライト値は「本体のトークン名」で宣言し、教材側の --ink / --line 系は
 * そこへのエイリアスにしてある。真実の在処が1テーマ1箇所になるので、
 * layout.js が書き出す共有ヘッダー／フッターもライトで正しく反転する。
 */

/* ダーク（既定） */
:root {
    /* 教材の名前を本体トークンへ向けるエイリアス。ダークでの値が本体と
       完全一致しているものだけをここに置く（--ink=#fff、--line=.14、
       --line-strong=.24）。--ink-soft(.68) と --ink-faint(.46) は本体より
       明るい値を意図的に維持しており、記事の <style> 側が持つ：本体値に
       寄せると 13.5px の解説文が 4.56:1 → 3.66:1 と AA を割るため（§36）。 */
    --ink: var(--text-primary);
    --line: var(--hairline);
    --line-strong: var(--hairline-strong);

    --on-accent: #001227;   /* アクセント面に載る文字。#3d8bff 上で 5.68:1 */
    --footer-bg: rgba(0, 0, 0, .6);
    --rail-bg: rgba(8, 8, 12, .96);
    color-scheme: dark;
}

/* ライト */
:root[data-theme="light"] {
    color-scheme: light;
    /* 面の階層。ダークの .02 / .14 を反転させるのではなく、ライト用の値を与える。
       地は青灰色でも黄色でもなく、ほぼ無彩のオフホワイト（紙の地）。
       R−B は −7（§41）→ +13（§42、温かすぎた）→ +4。明度も上げつつ、
       白カードとの ΔL* は +6.3 を確保して面が浮くようにしている（§43.1）。
       --surface-2 は背景と白の中間層。 */
    --bg: #eeedea;
    --surface: #ffffff;
    --surface-2: #f8f8f6;
    --surface-hot: #f1f1ee;   /* ホバー時だけの面（§71）。紙側は逆に一段暗く */
    --nav-bg: rgba(255, 255, 255, .72);

    /* 本体トークン。style.css はダーク専用なので、共有ヘッダー／フッター／
       ボタンが読む値をここで反転させる。これが無いと --nav-bg だけ明るくなって
       ロゴとナビ文字が白のまま残り、実質不可視になる（§36）。 */
    --text-primary: #14161f;                 /* 白地 18.04:1 */
    --text-secondary: rgba(20, 22, 31, .74); /* 白地  7.69:1 */
    --text-tertiary: rgba(20, 22, 31, .63);  /* 地 4.98:1 / 白面 5.22:1（AA）。
                                                背景を #f6f7fa → #eef0f5 に下げたぶん、
                                                .60 だと 4.52 と境界に寄るため上げた（§41.5） */
    /* 輪郭。ライトで「白い板」に見えていた主因は面の段差ではなく枠線の弱さだった
       （枠/面 比 1.31）。.20 に上げて 1.5 前後にする（§41.2）。 */
    --hairline: rgba(20, 22, 31, .22);
    --hairline-strong: rgba(20, 22, 31, .36);
    --glow-warm: rgba(192, 38, 103, .18);

    /* 教材側の名前。ライトでは本体値と一致するのでエイリアスで足りる。
       --ink / --line / --line-strong は上のダーク側エイリアスが自動追従する。 */
    --ink-soft: var(--text-secondary);
    --ink-faint: var(--text-tertiary);
    --line-soft: rgba(20, 22, 31, .10);   /* 節の区切り線。背景を下げたぶん合わせて上げる */

    /* アクセントはサイト本体と同じ青系。ライト背景では本体の #3d8bff が
       3.31:1 しか出ず本文リンクとして不合格なので、色相を保ったまま
       暗い青に置く（#1558d6 は色相 219°、本体 216° とほぼ同じ）。 */
    --accent: #1558d6;       /* 白地 6.18:1 / 地 5.77:1 */
    --accent-deep: #103f9e;  /* 白地 9.43:1。hover / active */
    --accent-tint: rgba(21, 88, 214, .09);
    /* 色付きボックス。ライトでは面も枠も淡すぎて種類の区別が弱かった。
       4種が同じ強さで並ぶよう tint と line を揃えて上げる（§41.3）。
       --key-line / --good-line は新設。それまで記事側に直書きされていた
       ダーク専用の値が、ライトでパステルになっていた（§41.2 ②）。 */
    /* amber だけ tint / line の基準色が文字色と違っていた（rgba(214,130,20) は
       明るいオレンジで、ライト背景では輪郭が出ない）。他3種と同じく、文字色
       #a35c00 を基準に揃える（§41.3）。 */
    --amber: #a35c00;
    --amber-tint: rgba(163, 92, 0, .15);
    --amber-line: rgba(163, 92, 0, .40);
    --good: #16794c;
    --good-tint: rgba(22, 121, 76, .15);
    --good-line: rgba(22, 121, 76, .38);
    --key: #c02667;
    --key-tint: rgba(192, 38, 103, .15);
    --key-line: rgba(192, 38, 103, .38);
    --teach: #5b3fd0;
    --teach-tint: rgba(91, 63, 208, .15);
    --teach-line: rgba(91, 63, 208, .36);
    --glow-cool: rgba(21, 88, 214, .18);
    --on-accent: #ffffff;   /* #1558d6 上で 6.18:1 */
    --footer-bg: #e7e6e2;   /* 地より一段下げて面を分ける */
    --rail-bg: rgba(252, 252, 250, .97);   /* 900px 以下のドロワー */
}

:root[data-theme="light"] #starfield {
    display: none;
}

/* 背景のグロー。ダークの密度感は面の差ではなく、星と背景グローが置いている
   微細なテクスチャから来ている。ライトは星を消しているぶん平坦になるので、
   グローだけで補う。星は出さない — 白地に灰色の点が散る見え方は、ダークの
   星空とは別物になるため（§41.4）。

   ★ 色はライトで差し替える。ダークの青紫（--spill-*）をそのまま温かい地に
   重ねると、グローの強い所だけ R−B が +13 → −7 と青へ転び、紙の地が濁る
   （実描画ピクセルで確認。§42.3）。地と同じ暖色系に振って、明度の起伏だけを
   残す。トークンを差し替えるだけなので、style.css の body::before は触らない。 */
:root[data-theme="light"] {
    --spill-blue: rgba(163, 92, 0, .05);
    --spill-blue-deep: rgba(192, 38, 103, .04);
    --spill-violet: rgba(91, 63, 208, .03);
}

:root[data-theme="light"] body::before {
    opacity: 1;
}

/* 教材の中でダーク専用の色が直接書かれていた箇所 */
.mod-h .no,
.step .sn,
.drill .qn {
    color: var(--on-accent);
}

/* フッターとヘッダーは layout.js が要素として書き出す（.site-footer ではない） */
footer {
    background: var(--footer-bg);
}

.footer-tagline {
    color: var(--ink-faint);
}

.prompt {
    background: var(--surface);
}

@media (max-width: 900px) {
    .rail {
        background: var(--rail-bg);
    }
}

/* 惑星画像の枠は宇宙の写真が映えるよう黒のまま（.planet-img .frame は変更しない） */

/* 切り替えボタン */
.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .3s ease, border-color .3s ease;
}

.theme-btn:hover {
    color: var(--ink);
    border-color: var(--line-strong);
}

.theme-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.theme-btn--float {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1050;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* 印刷は常に白地に黒 */
@media print {

    :root,
    :root[data-theme="light"] {
        --ink: #000;
        --ink-soft: #333;
        --ink-faint: #666;
        --line: #ccc;
        --line-soft: #eee;
        --surface: #fff;
        --surface-2: #f6f6f6;
        /* アクセントは紙でもサイトと同じ青。ここだけティール（#0a7d70）が
           残っていて、画面が青・印刷が緑という状態だった（§47）。値は
           lesson-theme のライトと同じ #1558d6 / #103f9e（白地 6.18:1 / 9.43:1）。
           ★ --on-accent も併せて置くこと。ダーク側の #001227 を継承したままだと
           `.mod-h .no` / `.step .sn` / `.drill .qn` のバッジ文字が
           #0a7d70 上で 3.75:1（すでに AA 割れ）、#1558d6 上では 3.05:1 と
           さらに落ちる。白にして 6.18:1（§47.3）。 */
        --accent: #1558d6;
        --accent-deep: #103f9e;
        --on-accent: #ffffff;
        --amber: #a86400;
        --good: #1c7a52;
        --key: #b0306a;
        --teach: #5a3fc0;
    }

    .theme-btn {
        display: none !important;
    }
}
/* --- レール上部の「1階層上へ」（§66）--------------------------------------
   全体の階層は右のサイトナビが持つ。ここはいちばん多い操作＝親へ戻る1行だけ。 */
.rail-up {
    /* 下の記事名（.brand）との間。一覧ページの .page-up と h1 の間と同じ
       考え方（§68.1）。枠が付いた分だけ広げてある（§69.1）。 */
    margin: 0 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.6;
}
/* 形も光り方も一覧ページの .page-up と同じ（§69.1）。レールは幅 250px だが、
   親の名前は長くても 8 文字程度なのでそのまま入る。 */
.rail-up a {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: 5px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-faint);
    text-decoration: none;
    /* ★ transition と、ホバーの背景・罫線・光・拡大は style.css の §70 が持つ
       （押せる面を全部同じ形に揃えてある）。ここに書くと、このファイルのほうが
       後に読まれるので §70 を黙って打ち消す。残すのはこのページ固有の文字色だけ。 */
}
.rail-up .ar {
    display: inline-block;
    transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
    .rail-up a:hover { color: var(--ink); }
    .rail-up a:hover .ar { transform: translateX(-3px); }
}
.rail-up a:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- 記事の末尾の前後リンク（§64.3／§66で共通化）------------------------- */
/* --- 記事の末尾の前後リンク（§64.3）。サイトに共通部品が無いので記事側に持つ。 --- */
.lesson-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:26px 0 0}
.lesson-nav.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.lesson-nav a,.lesson-nav span.soon{display:block;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:11px 14px;font-size:13px;line-height:1.5;color:var(--ink-soft);text-decoration:none;background:var(--surface);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
/* 矢印のある側は、その向きへ少しだけずれる（§68.2）。真ん中（一覧へ）は
   矢印が無いので明度だけ。準備中の span は押せないので反応しない。 */
.lesson-nav .ar{display:inline-block;transition:transform var(--dur) var(--ease)}
.lesson-nav .prev .ar{margin-right:.4em}
.lesson-nav .next .ar{margin-left:.4em}
@media (hover: hover) {
  /* ★ :not(.btn) は見た目のためではなく詳細度のため。本文リンクの共通ルール
     `body.is-article main a:not(.btn)`（0,2,3）が color を持っていくので、
     クラス数を 3 にして勝つ（0,3,1）。これが無いと果しは変わるのに
     文字は変わらない、という半分だけのホバーになる（§68.3）。 */
  .lesson-nav a:not(.btn):hover{color:var(--ink)}
  .lesson-nav a.prev:hover .ar{transform:translateX(-3px)}
  .lesson-nav a.next:hover .ar{transform:translateX(3px)}
}
.lesson-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion: reduce) {
  .lesson-nav a:hover .ar{transform:none}
  .rail-up a:hover .ar{transform:none}
}
.lesson-nav b{display:block;font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--ink-faint);margin-bottom:3px}
.lesson-nav .soon{color:var(--ink-faint);background:none;border-style:dashed}
.lesson-nav .mid{text-align:center}
.lesson-nav.two .mid{text-align:left}
.lesson-nav .next{text-align:right}
@media (max-width:560px){.lesson-nav,.lesson-nav.two{grid-template-columns:1fr}
}