/**
 * 朗読の1本ページ（きく／よむ）
 *
 * 日記の回ページ（css/pages/kohama-diary-legacy.css・.dp 系）と同じ組みを土台にし、
 * 扉だけを差し替えている。現行期の日記は写真が扉、旧サイト期は織りが扉、朗読は声が扉。
 * だから .dp__plate（見出し文のパネル）と同じ位置に、ここではプレイヤーが乗る。
 *
 * ただしプレイヤーの中身はネイティブ <audio controls> ＝ OS が描く部品で、
 * サイトの語彙をひとつも持たない。作らないと決めた自前UIの代わりに、囲いの方を
 * 「きょうの、むかし」のパネル（.kym__panel）と同じ作法で組んである——
 * --bg-inset の地・1px の罫・--shadow-panel・上端のミンサーの耳。
 * 一番大事な場所が一番素朴、という状態にしないための組み替え。
 *
 * きく と よむ は「同じページの2つの状態」ではなく、同じ実践を別角度から写した2枚。
 * 区別は色ではなく組み方でつける——きくは番号と帯（作品の中の一本）、
 * よむは番号を持たず、本人の折った行がそのまま面になる。新しい色は一つも足していない。
 *
 * 規律:
 * - 色はすべて semantic トークン＝ライト/ダーク自動追従。ダーク専用ブロックは書かない
 * - 本文中のリンクは --text-primary ＋ --accent の下線。--link(#48CAE4) は淡い地で
 *   1.7〜1.9:1 しか出ないため使わない
 * - --accent-strong は 24px 未満の文字色に使わない。アクセントは罫・パネル地・ミンサー帯で出す
 * - ミンサー帯（.kk-band）と糸（.kk-thread）は components.css の昇格済みコンポーネント。
 *   ここでは幅・位置しか触らず、絶対に定義し直さない
 */

.roudoku-single-container {
    padding-top: var(--space-2);
    padding-bottom: var(--space-4);
    animation: rd-fade 0.5s ease-out;
}

@keyframes rd-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* 本文カラム。きくは読み物ではなく聴き物なので --measure（68ch）に収める。
   よむだけ後段で広げる（本人の折った行を折り返させないため）。 */
.rd {
    max-width: var(--measure);
    margin: 0 auto;
}

/* ================================
   パンくず
   ================================ */

.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb a {
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--accent-strong);
    border-bottom-color: currentColor;
}

.breadcrumb .separator {
    margin: 0 8px;
    color: var(--border-strong);
}

.breadcrumb .current {
    color: var(--text-secondary);
    font-weight: 500;
}

/* ================================
   ヘッダー（通し番号／出自バッジ・題）
   ================================ */

.rd__head {
    text-align: center;
    margin-bottom: var(--space-4);
}

/* .kk-page-title の余白だけ寄せる。色とミンサー下線（::after）は触らない */
.rd__head .rd__title {
    margin: 18px 0 0;
    line-height: 1.4;
}

/* ================================
   プレイヤーのパネル（写真＝扉があった位置）
   ================================ */

/* 「きょうの、むかし」のパネル（.kym__panel）と同じ組み。
   --bg-inset の地 ＋ 1px の罫 ＋ --shadow-panel ＋ 上端のミンサーの耳。
   このページで一番大事な場所がブラウザ既定の部品ひとつだけになるのを避けるため、
   囲いの側をサイトの語彙でしっかり組む（新しい色は足していない）。
   overflow: hidden は耳を角丸で切るため。 */
.rd__plate {
    position: relative;
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    padding: 30px 36px 26px;
}

/* 耳。柄と面は .kk-band の定義に任せ、ここでは寸法と位置だけ差す。
   .kym__panel::before と同じく上端をひと通し。64px の切れ端ではなく通しにしたのは、
   パネルが「声の座」だと一目で分かる強さがここに要るため */
.rd__ear {
    position: absolute;
    inset: 0 0 auto 0;
    width: auto;
    --kk-band-h: 6px;
    opacity: 0.85;
}

/* 尺。朗読で「日付」にあたるのはこれ。PR #191 が「きょうの、むかし」の日付を
   右上 0.95rem の添え物から明朝の等幅に組み直したのと同じ扱いにする。
   組みは .kym__date と同じ——数は大きく明朝、単位は小さく。
   preload="none" のあいだプレイヤーは尺を出さないので、
   「聴くかどうか」を決める量はこの数字しかない。 */
.rd__dur {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.1em;
    font-family: var(--font-serif);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.rd__dur .kk-icon {
    align-self: center;
    margin-right: 0.5em;
    color: var(--text-muted);
}

.rd__dur-n {
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-primary);
}

.rd__dur-u {
    font-size: 0.95rem;
    margin-right: 0.28em;
}

/* 部品の座。ネイティブの controls はブラウザが描くので、
   せめて座布団だけはサイトの面（--bg-surface ＋ --border-soft）で敷く。
   :root の color-scheme: light dark により controls 自体もライト/ダークに追従するので、
   ダーク専用の指定は要らない（このファイルの規律どおり） */
.rd__deck {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
}

/* ネイティブ <audio controls> をそのまま使う。
   自前UIを作るとフォーカス・キーボード・スクリーンリーダを全部作り直すことになる。
   幅だけ座いっぱいに広げ、部品の見た目はブラウザに委ねる（それが一番壊れない）。 */
.rd__audio {
    display: block;
    width: 100%;
    margin: 0;
}

.rd__fallback {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.rd__fallback a {
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent);
}

/* 見出し文。語りの本数ぶん後から入る運用なので、無いときはこの要素ごと出ない。
   このサイトで明朝は「長文を読む」ときだけ使う——ここは一文だが、
   ページ内で唯一の言葉なので旧サイト期日記の .dp__lead と同じ扱いにする。 */
.rd__lead {
    margin: 22px 0 0;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2;
    color: var(--text-primary);
    text-wrap: pretty;
    word-break: auto-phrase;   /* 句の途中で折れないように（Chromium系。未対応でも壊れない） */
}

/* 「原稿は残っていない」「音源は残っていない」の一行。ごまかさないための行なので、
   小さくはするが隠さない */
.rd__origin {
    margin: 18px 0 0;
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--text-muted);
}

/* よむ側はパネルの外に置くので、上の余白を自分で持つ */
.rd__origin--yomu {
    margin-top: var(--space-3);
}

/* ================================
   節の見出し（きく「朗読集の中の位置」／よむ・きく「日記にもある」で共通）
   ================================ */

/* 見出し・本数・ミンサー帯 の3点セット。どちらの節も同じ形にしてあるのは、
   「何本のうちの何本目か」を必ず添えるため（PR #191 ④・量が分からない） */
.rd__shead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

/* .dp__vtitle と同じ判断で --heading を使わない（淡い地で 2.82:1）。
   アクセントは下のミンサー帯で担保する */
.rd__stitle {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}

/* 数の表示。尺と同じく明朝の等幅にして、量を表す文字は同じ組みに揃える */
.rd__scount {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.rd__sband {
    --kk-band-w: 84px;
    --kk-band-h: 6px;
    width: var(--kk-band-w);
    margin-top: 12px;
}

/* ================================
   朗読集の中の位置（きく）
   ================================ */

.rd__strip {
    margin-top: var(--space-5);
}

/* 扉の帯（template-parts/roudoku-reel.php）の置き場。
   帯の中身は一覧担当のコンポーネント（css/components/roudoku-reel.css）が持つので、
   ここで触るのは外側の距離だけ。内部の組みには一切手を出さない */
.rd__reel {
    margin-top: 20px;
}

.rd__where {
    margin: 16px 0 0;
    font-family: var(--font-serif);
    font-size: 0.94rem;
    line-height: 1.9;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ================================
   よむ … 原稿
   ================================ */

/* 本人の折った行をそのまま出すので、行が折り返された時点で意味が壊れる。
   最長は「トミさんのパワー」の49字（実測）。全角1文字はほぼ 1em なので、
   49em ＋ ぶら下げインデント 1.1em ＋ 余白で 52.5em を確保する。
   --measure(68ch) は半角基準で全角34字分しか無いので、よむだけ幅を広げている。
   .rd--yomu 側は 1rem 基準なので、.rd__script の 52.5em（=1.04rem 基準）が
   収まるように 56em を持たせる。 */
.rd--yomu {
    max-width: 56em;
}

/* font-size をここで決めているのは、上の max-width の em を行と同じ基準に揃えるため */
.rd__script {
    max-width: 52.5em;
    margin: var(--space-4) auto 0;
    font-size: 1.04rem;
}

/* 段落に流し込まず1行1要素。行間は詰めすぎない（朗読の原稿なので声の間に近い）。
   ぶら下げインデントにしてあるのは、画面が狭くて折り返した分を
   「本人の行」と見間違えないようにするため。「1行＝息継ぎ」とは銘打たない
   （4本一律には成り立たない。お土産は37行中19行が最大長±2に張り付いていて
    桁幅での折返しの疑いが濃い）。 */
.rd__line {
    margin: 0;
    padding-left: 1.1em;
    text-indent: -1.1em;
    font-family: var(--font-serif);
    font-size: inherit;   /* 幅の基準を .rd__script と一本にする */
    font-weight: 400;
    line-height: 2.1;
    color: var(--text-primary);
}

/* 原稿の空行＝段落の切れ目。行にはせず、間として置く */
.rd__line--gap {
    margin-top: 1.4em;
}

/* ================================
   日記への糸（きく・よむ 共通）
   ================================ */

/* 糸は よむ だけ、としていたのを改めた。この糸の趣旨は「届く先を全部拾う」
   （PR #191 ③）なので、声の回にも同じ受け口を置く。
   出るか出ないかはデータ（data/roudoku-backrefs.php）が決める。
   いま届く先を持つのは よむ だけ——語りは題材が日記と重ならない（Issue #194 ③-2）。
   節が出ない側にも同じ組みを残すのは、後で通ったときに面が変わらないようにするため */
.rd__voices {
    margin-top: var(--space-5);
}

/* 糸そのもの（.kk-thread）は components.css の定義に任せる。
   ここは上の見出しからの距離だけ */
.rd__voices .kk-thread {
    margin-top: 18px;
}

/* ================================
   前後ナビ
   ================================ */

.rd__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-5);
}

.rd__nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.rd__nav a:hover,
.rd__nav a:focus-visible {
    background: var(--bg-inset);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.rd__nav-mid {
    text-align: center;
}

.rd__nav-next {
    text-align: right;
}

/* 目録へ戻る導線は枠を持たせない（前後の2つと同じ重さにしないため） */
.rd__nav .rd__nav-index {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.rd__nav .rd__nav-index:hover,
.rd__nav .rd__nav-index:focus-visible {
    background: transparent;
    color: var(--text-primary);
    transform: none;
}

/* ================================
   レスポンシブ
   ================================ */

/* .container の内寸が 56em（約896px）を割る幅から下は、49字は物理的に入らない。
   折り返しは受け入れ、ぶら下げインデント（.rd__line）で本人の行との区別だけ保つ。
   960px は「viewport 960 − .container の左右 padding 20px = 920px」で、
   56em がまだ収まる下限。 */
@media (max-width: 960px) {
    .rd--yomu {
        max-width: var(--measure);
    }

    .rd__script {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .rd__head {
        margin-bottom: var(--space-3);
    }

    .rd__plate {
        padding: 24px 20px 20px;
    }

    /* 耳は上端を通しているので左位置の調整は要らない（幅は親に追従する） */

    .rd__dur-n {
        font-size: 1.8rem;
    }

    .rd__deck {
        padding: 12px;
    }

    .rd__lead {
        font-size: 1.1rem;
        line-height: 1.95;
    }

    .rd__strip,
    .rd__voices {
        margin-top: var(--space-4);
    }

    .rd__line {
        font-size: 1rem;
        line-height: 2;
    }

    .rd__nav {
        grid-template-columns: 1fr 1fr;
        margin-top: var(--space-4);
    }

    .rd__nav-mid {
        grid-column: 1 / -1;
        order: 3;
    }
}

@media (max-width: 480px) {
    .breadcrumb {
        margin-bottom: var(--space-2);
    }

    /* 「語り15本中 3本目」は見出しと並ぶと折れるので、狭い幅では下に落とす */
    .rd__shead {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .rd__nav a {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }

    .rd__nav .rd__nav-index {
        width: auto;
    }

    .rd__nav-next {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roudoku-single-container { animation: none; }
    .rd__nav a:hover,
    .rd__nav a:focus-visible { transform: none; }
}