@charset "UTF-8";
/* =====================================================================
   系譜図の音声解説（/static/notes/lineage.html だけで使う）
   ---------------------------------------------------------------------
   図そのもののスタイルは notes.css の §20。ここにあるのは
     - 操作パネル（再生・章送り・速度・章一覧・字幕）
     - 再生中の図の見せ方（沈める／灯す／リング／線を走る点）
   の 2 つで、lineage-tour.js とセットで動く。

   notes.css の「色は情報として使わない」に従う。いま喋っている場所は
   色ではなく、まわりを沈めること・枠の太さ・点の動きで示す。
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. 操作パネル
   ------------------------------------------------------------------ */
.ln-tour {
    border: 1px solid var(--nzw-border);
    background-color: var(--nzw-card);
    background-image: radial-gradient(var(--dot) 1px, transparent 1.1px);
    background-size: var(--dot-pitch) var(--dot-pitch);
    border-radius: var(--nzw-radius-lg);
    padding: var(--nzw-space-4) var(--nzw-space-5);
    margin-bottom: var(--nzw-space-4);
}

.ln-tour-head {
    display: flex;
    align-items: center;
    gap: var(--nzw-space-4);
}

/* 再生ボタン。図の中のノードと同じ「枠のある箱」に見せて、
   このパネルが図の一部だと分かるようにする */
.ln-tour-play {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    padding: 0;
    border: 1.2px solid var(--nzw-border-strong);
    border-radius: var(--nzw-radius-md);
    background: var(--nzw-card);
    color: var(--nzw-text-strong);
    cursor: pointer;
    transition: border-color var(--nzw-duration) var(--nzw-ease), background-color var(--nzw-duration) var(--nzw-ease);
}
.ln-tour-play:hover,
.ln-tour-play:focus-visible { border-color: var(--nzw-text-strong); background: var(--nzw-surface-1); outline: none; }
.ln-tour-play svg { width: 20px; height: 20px; fill: currentColor; display: block; }
/* 再生中だけ一時停止アイコンに差し替える */
.ln-tour-play .i-pause { display: none; }
.ln-tour.is-playing .ln-tour-play .i-play { display: none; }
.ln-tour.is-playing .ln-tour-play .i-pause { display: block; }

.ln-tour-meta { flex: 1 1 auto; min-width: 0; }
.ln-tour-kicker {
    margin: 0 0 2px;
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    letter-spacing: .08em;
    color: var(--nzw-muted);
}
.ln-tour-now {
    margin: 0;
    font-size: var(--nzw-text-sm);
    font-weight: var(--nzw-weight-bold);
    color: var(--nzw-text-strong);
    line-height: 1.5;
}

.ln-tour-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--nzw-space-2); }
.ln-tour-tools button {
    display: grid; place-items: center;
    min-width: 30px; height: 30px;
    padding: 0 var(--nzw-space-2);
    border: 1px solid var(--nzw-border);
    border-radius: var(--nzw-radius-sm);
    background: transparent;
    color: var(--nzw-sub);
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    cursor: pointer;
    transition: border-color var(--nzw-duration) var(--nzw-ease), color var(--nzw-duration) var(--nzw-ease);
}
.ln-tour-tools button:hover,
.ln-tour-tools button:focus-visible { border-color: var(--nzw-border-strong); color: var(--nzw-text-strong); outline: none; }
.ln-tour-tools button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 進み具合。章の切れ目に目盛りを打つので、いま何章目かが線で分かる ---- */
.ln-tour-track {
    position: relative;
    height: 3px;
    margin: var(--nzw-space-4) 0 var(--nzw-space-3);
    background: var(--nzw-surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.ln-tour-fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    background: var(--dot-ink);
}
.ln-tour-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--nzw-card); }

/* ---- 章一覧 ---- */
.ln-tour-chapters {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--nzw-space-2);
}
.ln-tour-chapters button {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--nzw-radius-sm);
    background: transparent;
    color: var(--nzw-muted);
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    cursor: pointer;
    transition: color var(--nzw-duration) var(--nzw-ease), border-color var(--nzw-duration) var(--nzw-ease);
}
.ln-tour-chapters button::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    border: 1px solid var(--nzw-border-strong);
}
.ln-tour-chapters button:hover,
.ln-tour-chapters button:focus-visible { color: var(--nzw-text-strong); border-color: var(--nzw-border); outline: none; }
.ln-tour-chapters li.is-done button { color: var(--nzw-sub); }
.ln-tour-chapters li.is-done button::before { background: var(--nzw-border-strong); }
.ln-tour-chapters li.is-now button { color: var(--nzw-text-strong); border-color: var(--nzw-border-strong); }
.ln-tour-chapters li.is-now button::before { background: var(--dot-ink); border-color: var(--dot-ink); }

/* ---- 字幕。図の下に置く ---- */
.ln-tour-caption {
    margin: var(--nzw-space-3) 0 0;
    min-height: 3.6em;
    font-size: var(--nzw-text-sm);
    line-height: var(--nzw-leading-relaxed);
    color: var(--nzw-muted);
}
.ln-tour-caption span { transition: color var(--nzw-duration) var(--nzw-ease); }
.ln-tour-caption .is-done { color: var(--nzw-sub); }
.ln-tour-caption .is-now { color: var(--nzw-text-strong); font-weight: var(--nzw-weight-medium); }

/* 音声が取れなかったときの 1 行。読み物としては本文が残るので、
   パネルを消さずに理由だけ出す */
.ln-tour-error {
    margin: var(--nzw-space-3) 0 0;
    font-family: var(--nzw-font-mono);
    font-size: var(--nzw-text-xs);
    color: var(--nzw-muted);
}

/* ---------------------------------------------------------------------
   2. 再生中の図
   ------------------------------------------------------------------ */
.ln-svg [data-ln] { transition: opacity .45s var(--nzw-ease); }

/* 目盛り・領域名・凡例は半分まで。文脈は残したいので消しはしない */
.ln-svg.is-touring > g,
.ln-svg.is-touring > a,
.ln-svg.is-touring > line { opacity: .45; }
/* 主役でないノードと線。ここまで沈めると、灯った側だけが読める */
.ln-svg.is-touring [data-ln] { opacity: .12; }
.ln-svg.is-touring [data-ln].is-lit { opacity: 1; }
/* リングと走る点を載せる層。沈める対象から外す（上の > g より後に書く） */
.ln-svg.is-touring > g.ln-fx { opacity: 1; }

/* 灯っているノードは枠を太く。色は足さない */
.ln-svg [data-ln].is-lit rect { stroke-width: 2; }
.ln-svg [data-ln].is-lit .ln-edge,
.ln-svg [data-ln].is-lit .ln-edge--soft { stroke-width: 2.2; }
.ln-svg [data-ln].is-lit .n-name,
.ln-svg [data-ln].is-lit .ln-ghost { fill: var(--nzw-text-strong); }
.ln-svg [data-ln].is-lit .n-meta,
.ln-svg [data-ln].is-lit .ln-label { fill: var(--nzw-sub); }

/* 灯った瞬間に 1 回だけ広がる枠。どこへ移ったかを目で追えるようにする */
.ln-ring {
    fill: none;
    stroke: var(--dot-ink);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: lnRing 1.5s var(--nzw-ease) forwards;
}
@keyframes lnRing {
    from { transform: scale(1); opacity: .55; }
    to   { transform: scale(1.14); opacity: 0; }
}

/* 線の上を走る点。矢印の向きに何が渡ったのかを見せる */
.ln-spark { fill: var(--dot-ink); }

@media (prefers-reduced-motion: reduce) {
    .ln-svg [data-ln] { transition: none; }
    .ln-ring, .ln-spark { display: none; }
}

/* ---------------------------------------------------------------------
   3. 狭い画面
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .ln-tour { padding: var(--nzw-space-3) var(--nzw-space-4); }
    .ln-tour-head { flex-wrap: wrap; }
    .ln-tour-meta { flex: 1 1 140px; }
    /* 章一覧は 2 行ぶんだけ見せて、残りは中で縦スクロールさせる */
    .ln-tour-chapters { max-height: 7.5em; overflow-y: auto; }
}