/* reader-flow.css — READER「エネルギーの流れ仮説」ページ固有スタイル（body.reader-flow スコープ）
   参考（pjdhiro 指示 2026-07-14）:
   - cs reader/wave-vortex.html … シェーダー背景の上に「一枚のガラス読書カラム」を敷く型
   - pjdhiro garage/ … 章ごとの details.sec アコーディオン＋PC常設/モバイルドロワーの目次
   制約: DESIGN-RULES §0a — 色・タイポは tokens.css の変数のみ。シェーダー背景は reader-app.js を共用。
   tokens + style.css + reader.css の上に載せる（読み込み順は template 参照）。 */

/* ===== 一枚ガラスの読書カラム（cs wave-vortex 型） ===== */
body.reader-flow .reader-wrap {
    max-width: 860px;
    margin: 0 auto 48px;
    padding: 8px clamp(16px, 4vw, 36px) 40px;
    background: var(--glass-bg-medium);
    border: 1px solid var(--glass-border-soft);
    border-radius: 16px;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.reader-flow .reader-hero,
body.reader-flow .reader-article {
    max-width: none;
}
body.reader-flow .reader-hero {
    padding: 28px 0 8px;
    text-align: left;
}
body.reader-flow .reader-hero h1 {
    font-family: var(--serif-jp);
    color: var(--navy);
    text-shadow: none;
}
body.reader-flow .reader-subtitle,
body.reader-flow .reader-meta {
    text-shadow: none;
    color: var(--mid);
}

/* 冒頭の宣言（#20）：副題の下に、本文と同じ大きさで置く */
body.reader-flow .reader-lead {
    font-family: var(--serif-jp);
    font-size: 1rem;
    line-height: 1.9;
    color: var(--ink);
    text-align: left;
    margin-bottom: 1.5rem;
}
/* 冒頭のまとめの見出し（問い・見立て）：部の番号と同じ系統の小さなラベルを、段落の上に置く */
body.reader-flow .reader-lead__label {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--serif-jp);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--gold);
}

/* 冒頭の問いの一行目（pjdhiro 2026-11-09「大きくして」）：段落の頭に一行で大きく置く */
body.reader-flow .reader-lead__question {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.35rem;
    line-height: 1.6;
    font-weight: 600;
}

/* 冒頭の概要の見出し（pjdhiro 2026-11-09「概要だね」）：第一部より前の四段が、ページ全体の概要だと分かるように */
body.reader-flow .reader-summary__title {
    font-family: var(--serif-jp);
    font-size: 1.1rem;
    letter-spacing: 0.2em;
    color: var(--ink);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 0.3rem;
    margin: 1.5rem 0 1rem;
}
body.reader-flow .reader-lead__list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
}
body.reader-flow .reader-lead__list li {
    margin-bottom: 0.4rem;
}

/* 草稿バナー（cs draft-banner 型） */
body.reader-flow .draft-banner {
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    border-left: 4px solid var(--gold);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 18px 0 8px;
    font-size: 0.88rem;
    color: var(--mid);
}
body.reader-flow .draft-banner b { color: var(--ink); }

/* ガラス面の上では発光は不要（可読性はカラムが担う） */
body.reader-flow .glow-text,
body.reader-flow .glow-heading {
    text-shadow: none;
}

/* リード部（ひとことで・FAQ・サマリー）のコールアウト */
body.reader-flow .reader-article blockquote.reader-callout {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-soft);
    border-left: 4px solid var(--navy);
    border-radius: 10px;
    margin: 0 0 18px;
    padding: 14px 20px;
    box-shadow: none;
}
body.reader-flow .reader-article blockquote.reader-callout h3 {
    margin-top: 0.4em;
    color: var(--navy);
}

/* ===== 章アコーディオン（garage details.sec 型） ===== */
body.reader-flow details.sec {
    margin: 0 0 2px;
    background: none;
    border: none;
    padding: 0;
    scroll-margin-top: 12px; /* scrollIntoView の着地オフセット */
}
body.reader-flow details.sec > summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    font-family: var(--serif-jp);
    font-size: clamp(1.1rem, 3.4vw, 1.35rem);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.5;
    padding: 26px 44px 10px 0;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--glass-border-faint);
}
body.reader-flow details.sec > summary::-webkit-details-marker { display: none; }
body.reader-flow details.sec > summary::after {
    content: "＋";
    position: absolute;
    right: 8px;
    bottom: 12px;
    color: var(--gold);
    font-weight: 400;
    font-size: 1.3rem;
}
body.reader-flow details.sec[open] > summary::after { content: "−"; }
body.reader-flow details.sec > summary:hover { color: var(--gold); }
body.reader-flow details.sec .secbody { padding: 2px 0 10px; }
body.reader-flow details.sec .secbody > *:first-child { margin-top: 14px; }

/* ===== 部の区切り（章をまとめる。正本 MD の <!--PART:第一部|題-->・#20） ===== */
body.reader-flow .reader-article .reader-part {
    margin: 56px 0 4px;
    padding: 0 0 8px;
    scroll-margin-top: 12px;
}
body.reader-flow .reader-article .reader-part:first-child,
body.reader-flow .reader-article .reader-part + details.sec { margin-top: 0; }
body.reader-flow .reader-article .reader-part__no {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--gold);
}
body.reader-flow .reader-article .reader-part__title {
    margin: 4px 0 0;
    font-family: var(--serif-jp);
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy);
}

/* ===== 参照の一覧（巻末・build-reader-lp.py の collect_refs が作る・#20） ===== */
body.reader-flow .reader-article ul.reader-refs {
    list-style: none;
    padding: 0;
    margin: 4px 0 18px;
    font-size: 0.85rem;
    line-height: 1.7;
}
body.reader-flow .reader-article ul.reader-refs li { margin: 0 0 8px; }
body.reader-flow .reader-article .reader-refs__where {
    display: block;
    font-size: 0.75rem;
    color: var(--gold);
    text-decoration: none;
}
body.reader-flow .reader-article .reader-refs__where::before { content: "章："; }
body.reader-flow .reader-article .reader-refs__where:hover { text-decoration: underline; }

/* ===== 本文中の畳み（garage details.acc 型カード） ===== */
body.reader-flow .reader-article details.acc {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-soft);
    border-radius: 12px;
    margin: 12px 0;
    padding: 0 20px 4px;
    overflow: hidden;
}
body.reader-flow .reader-article details.acc > summary {
    cursor: pointer;
    list-style: none;
    margin: 0 -20px;
    padding: 14px 46px 14px 20px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--navy);
    position: relative;
}
body.reader-flow .reader-article details.acc > summary::-webkit-details-marker { display: none; }
body.reader-flow .reader-article details.acc > summary::after {
    content: "＋";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mute);
    font-weight: 400;
    font-size: 1.1rem;
}
body.reader-flow .reader-article details.acc[open] > summary::after { content: "−"; }
body.reader-flow .reader-article details.acc > summary:hover { background: var(--glass-bg-medium); }

/* ===== 表（garage tablewrap 型 = 横スクロール枠） ===== */
body.reader-flow .reader-article .tablewrap {
    overflow-x: auto;
    margin: 18px 0;
    border: 1px solid var(--glass-border-soft);
    border-radius: 12px;
    background: var(--glass-bg-strong);
    padding: 0;
    box-shadow: none;
}
body.reader-flow .reader-article .tablewrap table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
    min-width: 520px;
    margin: 0;
}
body.reader-flow .reader-article .tablewrap th,
body.reader-flow .reader-article .tablewrap td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border-soft);
    vertical-align: top;
}
body.reader-flow .reader-article .tablewrap thead th {
    background: var(--glass-bg-medium);
    color: var(--navy);
    font-weight: 700;
    white-space: nowrap;
}
body.reader-flow .reader-article .tablewrap tbody tr:last-child td { border-bottom: none; }

/* 横スクロールなしで収める表（正本 MD で <div class="tablefit"> に囲む。DESIGN-RULES B1: 320px 幅で横スクロールなし） */
body.reader-flow .reader-article .tablefit .tablewrap { overflow-x: visible; }
body.reader-flow .reader-article .tablefit table {
    min-width: 0;
    table-layout: fixed;
}
body.reader-flow .reader-article .tablefit thead th { white-space: normal; }
body.reader-flow .reader-article .tablefit th:first-child,
body.reader-flow .reader-article .tablefit td:first-child { width: 16%; }
/* 三列をほぼ均等に割る比較表（概念｜駆動源｜条件など。pjdhiro 2026-11-04 #20「表の方が見やすい。横スクロールせずに見たい。スマホを考慮」） */
body.reader-flow .reader-article .tablefit.cols-3 th:first-child,
body.reader-flow .reader-article .tablefit.cols-3 td:first-child { width: 32%; }
body.reader-flow .reader-article .tablefit.cols-3 th:nth-child(2),
body.reader-flow .reader-article .tablefit.cols-3 td:nth-child(2) { width: 30%; }
body.reader-flow .reader-article .tablefit.cols-4 th:first-child,
body.reader-flow .reader-article .tablefit.cols-4 td:first-child { width: 22%; }
body.reader-flow .reader-article .tablefit.cols-4 th:nth-child(2),
body.reader-flow .reader-article .tablefit.cols-4 td:nth-child(2),
body.reader-flow .reader-article .tablefit.cols-4 th:nth-child(3),
body.reader-flow .reader-article .tablefit.cols-4 td:nth-child(3) { width: 26%; }
/* 先頭が回の番号のような細い列の表（business-design-syllabus の 15 回の表・2026-11-10） */
body.reader-flow .reader-article .tablefit.num-first th:first-child,
body.reader-flow .reader-article .tablefit.num-first td:first-child { width: 2.4em; }
body.reader-flow .reader-article .tablefit .en {
    display: block;
    margin-top: 2px;
    font-size: 0.82em;
    color: var(--mute);
}
@media (max-width: 600px) {
    body.reader-flow .reader-article .tablefit th,
    body.reader-flow .reader-article .tablefit td {
        padding: 8px 6px;
        font-size: 0.8rem;
        overflow-wrap: anywhere;
    }
    body.reader-flow .reader-article .tablefit .en { display: none; }
}

/* トップと同じ Menu（.top-bar・position: fixed）を置くページで、冒頭の草稿バナーが Menu ボタンの下に潜らないよう
   先頭のバナーだけ下げる（love-driven-dev・2026-11-03）。スクリーナーはバナーを持たないので影響しない */
body.reader-flow .top-bar ~ #content .reader-wrap > .draft-banner:first-child {
    margin-top: 4.25rem;
}

/* ===== 畳みの中の見出し（表の行に対応＝h4 群・h5 概念名。DESIGN-RULES §13） ===== */
body.reader-flow .reader-article details.acc h4 {
    margin: 22px 0 4px;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--gold);
    border-bottom: 1px solid var(--glass-border-soft);
    padding-bottom: 4px;
}
body.reader-flow .reader-article details.acc h5 {
    margin: 14px 0 2px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
}
body.reader-flow .reader-article details.acc h5 + p { margin-top: 2px; }
/* 二列の項目表（概念ごとの 出どころ／考え方／よく効く場面／届かないところ。pjdhiro 2026-11-04 #20「２列三行がいい」） */
body.reader-flow .reader-article .tablefit.cols-2 th:first-child,
body.reader-flow .reader-article .tablefit.cols-2 td:first-child { width: 28%; color: var(--mute); }
body.reader-flow .reader-article details.acc .tablefit.cols-2 .tablewrap { margin: 6px 0 14px; }

/* ===== 章と章のあいだの転回点（正本 MD の <!--TURN-->。章を閉じていても見える。#20） ===== */
body.reader-flow .reader-article .reader-turn {
    margin: 36px auto;
    padding: 22px 8px;
    max-width: 30em;
    text-align: center;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}
body.reader-flow .reader-article .reader-turn p {
    font-family: var(--serif-jp);
    font-weight: 300;
    line-height: 1.9;
    color: var(--mid);
    margin: 0;
}
body.reader-flow .reader-article .reader-turn p:first-child {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--navy);
    margin-bottom: 10px;
}

/* ===== 章本文の小見出し（構成要素の「主張」「仮説」など。h3 の下の短いラベル。DESIGN-RULES §13） ===== */
body.reader-flow .reader-article .secbody > h4 {
    margin: 16px 0 2px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--gold);
}
body.reader-flow .reader-article .secbody > h4 + p { margin-top: 2px; }

/* 参照の一覧（分野｜出典｜読んだ形｜確かめ先）。出典の列を広く取り、320px でも語の途中で折れにくくする（love-history・pjdhiro 2026-11-09「全て一つの表でいいよね」） */
body.reader-flow .reader-article .tablefit.refs th:nth-child(1),
body.reader-flow .reader-article .tablefit.refs td:nth-child(1) { width: 13%; }
body.reader-flow .reader-article .tablefit.refs th:nth-child(2),
body.reader-flow .reader-article .tablefit.refs td:nth-child(2) { width: 43%; }
body.reader-flow .reader-article .tablefit.refs th:nth-child(3),
body.reader-flow .reader-article .tablefit.refs td:nth-child(3) { width: 17%; }
@media (max-width: 600px) {
    body.reader-flow .reader-article .tablefit.refs td:nth-child(1) { font-size: 0.72rem; }
}

/* 見渡しの表（語｜向ける先・区別｜出どころ）。中の列を広く取る（love-history の「Love の範囲と種類」・2026-11-09 #79） */
body.reader-flow .reader-article .tablefit.scope th:nth-child(1),
body.reader-flow .reader-article .tablefit.scope td:nth-child(1) { width: 22%; }
body.reader-flow .reader-article .tablefit.scope th:nth-child(3),
body.reader-flow .reader-article .tablefit.scope td:nth-child(3) { width: 27%; }

/* ===== リンクの行き先の印（#91・pjdhiro 2026-11-09「リンクが別ページに飛んでいることがわかりづらい」。DESIGN-RULES §13） =====
   ページの中へ飛ぶリンク（#…）は印なし。同じサイトの別ページは紙の印、サイトの外は箱から出る矢印。
   印は文字（↗ など）でなく線画のマスクで描く：iPhone で絵文字に化けず、色はリンクの色（currentColor）に従う。 */
body.reader-flow {
    --link-mark-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.8h4l2.2 2.2v6.2H3zM7 1.8V4h2.2M4.6 6.2h2.8M4.6 8h2.8'/%3E%3C/svg%3E");
    --link-mark-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5H2.5v7h7V7M7.2 2.5h2.3v2.3M9.5 2.5 5.6 6.4'/%3E%3C/svg%3E");
}
body.reader-flow .reader-article a[href]:not([href^="#"]):not(.reader-linkcard)::after {
    /* 改行しない空白に幅を持たせて印を載せる：印だけが次の行の頭に送られない */
    content: "\00a0";
    padding-left: 0.6em;
    background-color: currentColor;
    -webkit-mask: var(--link-mark-page) right 55% / 0.72em 0.72em no-repeat;
    mask: var(--link-mark-page) right 55% / 0.72em 0.72em no-repeat;
}
/* サイトの外（http で始まり、このサイトの URL でないもの） */
body.reader-flow .reader-article a[href^="http"]:not([href^="https://uminomae.github.io/project-design-theory/"]):not(.reader-linkcard)::after {
    -webkit-mask-image: var(--link-mark-out);
    mask-image: var(--link-mark-out);
}