/**
 * 朗読アーカイブ ＝ 作品ページ（Issue #194）
 *
 * 色は semantic トークンのみ。ダーク専用ブロックは書かない（トークンが自動で切り替わる）。
 * 本文中のリンクに --link は使わず、--text-primary ＋ --accent の下線で出す。
 * --accent-strong は24px未満の文字色に使わない。アクセント地の上の文字は --text-on-accent-dark。
 *
 * ミンサーの帯（.kk-band）・織り目（.kk-seam）・見出し（.kk-section-title）は
 * components.css の語彙。ここでは寸法のカスタムプロパティを渡すか、
 * 自前のクラス（.rd__*）を重ねるだけで、.kk-* を定義し直さない。
 *
 * 目録は日記の .ledger / .lrow とは列が違う（日記＝回次・題・見出し・日付、
 * 朗読＝通し番号・題・尺）ので流用せず .rd__track を別に作る。同じ考えだが同じ部品ではない。
 */

.rd-page {
    /* 目録・織り目・入口を同じ幅に揃える。--measure(68ch) だと目録には狭い */
    --rd-width: 860px;
    padding-top: var(--space-2);
    padding-bottom: var(--space-5);
}

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

.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;
}

/* 0.85rem なので --accent-strong は文字色に使わない（24px 未満は不可）。
   色は動かさず下線だけ濃くする */
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    border-bottom-color: var(--accent-strong);
}

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

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

/* ================================
   リード文
   ================================ */

.rd__lead {
    max-width: var(--measure);
    margin: calc(-1 * var(--space-2)) auto var(--space-4);
    font-size: 1rem;
    line-height: 2;
    color: var(--text-secondary);
}

/* ================================
   扉（朗読集の姿 ＋ 通して聴く）
   ================================
   帯・目盛・通し再生を一枚の面にまとめてページの頭に据える。
   図と操作を切り離すと、図は説明の添え物に見えて主役を譲ってしまう。
   面の作りは .kym__panel（#191）と同じ——地は --bg-inset、上端に織りの耳。 */

.rd__door {
    position: relative;
    max-width: var(--rd-width);
    margin: 0 auto var(--space-4);
    background: var(--bg-inset);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

/* パネルの上端に織りの耳を一本。面が一枚あるだけの状態にしない（.kym__panel と同じ手）。
   面と柄は .kk-band が持つので、ここでは寸法と濃さだけ差す */
.rd__door-ear {
    --kk-band-h: 6px;
    --kk-band-w: 100%;
    opacity: 0.85;
}

.rd__door-body {
    padding: 26px 32px 22px;
}

/* 図の見出し。--heading はライトの淡い地で 2.82:1 しか出ないので本文色を使う
   （.kym__title と同じ理由）。主張は下の帯そのものが担う */
.rd__door-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-primary);
}

/* 扉の中では帯を太くする。ここが作品の姿を出すいちばんの面なので、
   目録の中の細い織りと同じ細さでは務まらない。
   .rd__reel-strip / .rd__reel-seg--se は components/roudoku-reel.css が定義するもので、
   ここでは扉の中に置かれたときの寸法だけ上書きする（個別ページの帯は動かさない）。 */
.rd__door .rd__reel {
    margin-bottom: 0;
}

.rd__door .rd__reel-strip {
    height: 44px;
}

.rd__door .rd__reel-seg--se {
    --kk-band-h: 10px;
}

.rd__door .rd__reel-scale {
    font-size: 0.88rem;
}

/* ================================
   いま鳴っているものの面（.rd__now）
   ================================
   通し再生を押すと、扉のパネルの中にこの面が立つ。要素はJSが作るので、
   JSが無い環境には存在しない（HTMLには扉しか無い）。

   ■ 誰が見るか、が寸法を決めている

   老夫婦が寝室でスマホを置いて聴く。画面が消えている時間のほうが長く、
   たまに見るのは暗い部屋・離れた距離・高齢の目。だから

     ・題はページ見出しに近い級数まで大きく（clamp で狭い画面にも収める）
     ・動くのは水面だけ。経過時間の数字は出さない
       （秒が刻まれ続ける面は、消す前の一瞥に要らない。進行は帯が幅で言う）
     ・押すものは 52px 以上、間隔をあけて置く

   ■ 新しい色も部品も足していない

   面の中身は1本ページ（css/pages/roudoku-single.css）で作ったものの置き換え。
   通し番号は目録の .rd__no、帯とレールは .kk-band と --bg-inset-strong、
   水面は components/roudoku-inou.css、朗読集の姿は扉の帯そのものを移してくる。
   ダークではトークンの再マップで地が夜のイノー（--c-navy-900 系）に沈むので、
   この時間帯にちょうど落ち着く——ここにダーク専用ブロックは書かない。 */

.rd__now {
    text-align: left;
}

/* 通し番号と題。題が2行になっても番号は最初の行の高さに揃う */
.rd__now-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
}

/* 目録の通し番号（.rd__no）と同じ部品。面ではひとまわり大きくして、
   鳴っている行と同じ塗り（.rd__track.is-playing .rd__no）を最初から着せる。
   地がアクセントなので文字は紺（--text-on-accent-dark／9.81:1） */
.rd__now-no {
    font-size: 1.3rem;
    padding: 3px 14px;
    background: var(--grad-accent);
    color: var(--text-on-accent-dark);
}

/* 面の主役。ページ見出しに近い級数で、静かに置く */
.rd__now-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 6.5vw, 2.4rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

/* 見出し文。目録の <small> と同じ出どころで、ここでは読める級数に上げる */
.rd__now-lead {
    max-width: var(--measure);
    margin: 12px 0 0;
    font-size: 1rem;
    line-height: 2;
    color: var(--text-secondary);
}

/* 尺。1本ページの .rd__dur と同じ組み（明朝の等幅）だが、面の主役は題なので
   あちらの 2.1rem までは上げない。位置は帯が言うので、ここは長さだけ */
.rd__now-dur {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 14px 0 0;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.rd__now-dur .kk-icon {
    color: var(--text-muted);
}

/* 進行のレール。帯は経過したぶんしか無いので、全体の長さを示す地を敷く
   （扉の帯が .rd__reel-strip に --bg-inset を敷いているのと同じ手） */
.rd__now-rail {
    display: block;
    height: 6px;
    margin-top: 12px;
    border-radius: var(--radius-input);
    background: var(--bg-inset-strong);
    overflow: hidden;
}

/* ミンサーの帯＝時間。幅はJSがインラインで書く。
   水面（音）のすぐ下に置いて、上が音・下が時間の並びを1本ページと揃える */
.rd__now-band {
    --kk-band-h: 6px;
}

/* 朗読集の中の姿。扉の帯をそのまま面の中へ移してくるので、
   組みは components/roudoku-reel.css と上の .rd__door .rd__reel-* のまま。
   ここで持つのは面の中での余白だけ */
.rd__now > .rd__reel {
    margin-top: 22px;
}

/* 面が立つと退くもの。--accent 地の錘（.rd__spec）は display:inline-flex なので、
   UA の [hidden]{display:none} より詳細度が高い。明示しないと消えない
   （.rd__playall[hidden] と同じ罠） */
.rd__spec[hidden],
.rd__door-note[hidden],
.rd__door-title[hidden] {
    display: none;
}

/* 面の中に出す「次へ」「◯分から続ける」。行の中とは並びが違うので、
   グリッド前提の指定（.rd__next の grid-column）を打ち消して1本の口にする */
.rd__now .rd__next {
    display: block;
    width: 100%;
    margin: 18px 0 0;
    text-align: center;
}

/* ================================
   途中で止める（.rd__sleep）
   ================================
   途中で眠る人のためのもの。壁時計ではなく「鳴った秒数」で数え（JS側）、
   文の途中では切らずに、その演目が終わったところで止める。
   だから「30分」は実際には32〜35分あたりになる——そのズレを .rd__sleep-note が
   先に書く（「12 文化の継承 が終わったら止まります」）。

   端末で出し分けない（画面幅は端末を言い当てない）。デスクトップでも出るが、
   面のいちばん下＝聴き始めた人の視線の終わりに置く。 */

.rd__sleep {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.rd__sleep-label {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.rd__sleep-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 押し間違えにくい大きさ。52px は .rd__playall と同じで、
   指の的としてサイトの中で一番大きい部類に揃えてある */
.rd__sleep-opt {
    min-height: 52px;
    min-width: 104px;
    padding: 12px 22px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.rd__sleep-opt:hover {
    background: var(--bg-inset-strong);
    border-color: var(--accent);
}

.rd__sleep-opt:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* 選ばれているもの。地がアクセントなので文字は紺 */
.rd__sleep-opt[aria-pressed="true"] {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--text-on-accent-dark);
}

.rd__sleep-note {
    margin: 12px 0 0;
    font-size: 0.92rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

/* 操作の面。図と地続きだが、押すところはここだと分かるように罫で一段落とす */
.rd__door-act {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
}

/* 朗読で日付にあたるのは尺。日記が日付を明朝の等幅で組んでいるのと同じ組みにする
   （.dp__voice-day / .dp__nav-when と同じ語彙。新しいフォントは足さない） */
.rd__spec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--space-2);
    padding: 7px 18px;
    background: var(--bg-surface);
    border-radius: var(--radius-pill);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.rd__spec-sep {
    color: var(--text-muted);
}

/* 通し再生の口。地がアクセントなので文字は紺（白は 1.94:1）。
   .kym__more と同じ考え方で、シニア向けにタップ領域を大きく取る。 */
.rd__playall {
    display: block;
    min-height: 52px;
    margin: 0 auto 12px;
    padding: 14px 40px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--grad-accent);
    color: var(--text-on-accent-dark);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* JSが無い環境では出さない。上の display:block は UA の [hidden]{display:none} より
   詳細度が高いので、これを書かないと hidden のまま見えてしまう——押しても何も
   起きないボタンが残り、「JSが無くても壊れない」の担保が崩れる。 */
.rd__playall[hidden] {
    display: none;
}

.rd__playall:hover {
    background: var(--grad-accent-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

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

.rd__door-note {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.8;
    color: var(--text-muted);
}

/* 自動送りの状況。JSが何も書いていないあいだは高さも持たない */
.rd__status:empty {
    display: none;
}

.rd__status {
    margin: var(--space-2) 0 0;
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* ================================
   面（朗読集／原稿）
   ================================
   二面は縦に並ぶ。切り替え（ピル2つ・:target・:has()）は撤去した——
   タブは「同じ種類のものが2つある」と主張する部品で、実際はそうではない。
   音のほうは名前と形を持ったひとつの作品、文のほうは別々の機会に書かれた原稿が
   4本たまたま残っているだけ。対等に並べると原稿にも「ひとまとまり」という
   嘘の輪郭ができる。「原稿が25行の後ろに埋もれる」は曲目の畳み（下）で解く。

   面の見出しは .kk-section-header ＋ .kk-section-title（components.css）を
   そのまま使う。ミンサー下線も余白も向こうが持っているので、ここには何も足さない。 */

.rd__panel {
    max-width: var(--rd-width);
    margin: 0 auto;
}

/* 面の説明。行長は目録の幅（860px）ではなく本文の測り（--measure）に従わせる */
.rd__section-note {
    max-width: var(--measure);
    margin: 0 0 var(--space-3);
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text-muted);
}

/* ================================
   曲目の畳み（<details>）
   ================================
   ネイティブなのでJSは要らず、キーボードでもスクリーンリーダでも動く。
   既定は畳んだ状態。25トラックあることは扉の帯と summary の「25トラック」が
   言っているので、行を全部出しておかなくても姿は伝わる。畳めば扉の下に
   織り目と原稿4本が続いて、頁の骨格が一目に入る。
   畳んだまま通し再生を押されたときは roudoku-archive.js が開く。 */

/* display:flex にすると開閉の三角（::marker）が消えてしまい、畳めることが
   見た目から分からなくなる。ネイティブの印を残したいので list-item のまま組む。 */
.rd__summary {
    display: list-item;
    list-style-position: inside;
    padding: 12px 12px 12px 4px;
    border-bottom: 1px solid var(--border-mid);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.25s ease;
}

.rd__summary:hover {
    color: var(--text-primary);
}

.rd__summary:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -2px;
}

/* 畳みの中に置いた断り書き（音量差）。summary の下罫と目録のあいだに一段。
   ページの頭には出さない——鳴りはじめてから効いてくる話なので、目録を
   開いた人の目にだけ入ればよい。 */
.rd__list-note {
    margin: 0;
    padding: 10px 12px 12px;
    font-size: 0.84rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.rd__summary-n {
    margin-left: 10px;
    font-family: var(--font-serif);
    font-size: 0.86rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* 畳みの目録には上の罫が要らない（summary の下罫が兼ねる）。
   よむ の目録は summary を持たないので、そちらには引く */
.rd__list {
    border-top: 1px solid var(--border-mid);
}

.rd__details .rd__list {
    border-top: none;
}

/* ================================
   きく の行（語り15本）
   ================================
   列は 通し番号・題（＋見出し文）・種別・尺。JSが読み込まれると <audio> の controls が外れ、
   行そのものが再生の的になる（1行1段）。JSが無いときだけ、行の2段目に
   ネイティブのプレイヤーが全幅で敷かれる。
   種別（語り）を出しているのは、通し再生中に音のトラックへ移ったときの音量差を
   「今は間奏だ」と読ませるため。音量そのものは正規化しない。 */

.rd__track {
    display: grid;
    /* 通し番号 ・ 題（＋見出し文） ・ 種別 ・ 尺 ・ 1本ページへの的 */
    grid-template-columns: 3.2em 1fr auto auto auto;
    gap: 6px var(--space-2);
    align-items: baseline;
    /* 題1行＋見出し文1行で約72px。ネイティブの controls が並んでいたとき（104px）
       より低く、行そのものがタップ領域なので 44px は下回らない。
       高さの内訳が「OSの部品」から「読める文」に入れ替わったのがこの変更の眼目。 */
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-mid);
    transition: background 0.25s ease;
}

/* JSが行を再生UIにした行。透明なボタンを敷くので位置の基準になる */
.rd__row--live {
    position: relative;
}

/* controls を外された <audio> は鳴るだけの箱。UAの既定でも消えるが、明示しておく
   （display:none でも再生は止まらない） */
.rd__audio:not([controls]) {
    display: none;
}

/* 行を覆う透明な再生ボタン。
   行そのものを role="button" にしないのは、行の中に1本ページへの的（.rd__to）が
   入っているため——操作要素の入れ子になってスクリーンリーダの読みが壊れる。
   ボタンと的を兄弟にしておけば Tab は「再生 → 的」と素直に流れ、
   見た目は行全体が的のままになる。 */
.rd__play {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    /* 行の高さがそのままタップ領域。44px を下回らないよう行の padding で確保する */
}

.rd__play:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: -2px;
}

/* 押せるもの（1本ページへの的・「次へ」）はボタンより上に置く。
   持ち上げるのは押せるものそのものだけで、囲み（.rd__title など）ごと持ち上げない
   ——列の高さぶんが「押しても何も起きない面」になってしまう。
   題と見出し文の上は再生ボタンのままにしておく。 */
.rd__row--live .rd__to,
.rd__row--live .rd__next {
    position: relative;
    z-index: 1;
}

/* 再生中の行。地の色をわずかに変えるだけで、位置は動かさない。
   .is-heard は「1本ページから戻ってきて、この回のここまで聴いている」状態。
   鳴っていないだけで居場所は同じなので、同じ地の色で出す——新しい印は作らない。
   どこまで来たかは下の進行の帯（.rd__progress）が幅で言う。 */
.rd__track.is-playing,
.rd__track.is-heard,
.rd__se.is-playing,
.rd__se.is-heard {
    background: var(--bg-inset);
}

.rd__row--live:hover {
    background: var(--bg-inset);
}

/* 進行の帯。再生中の行の下端をミンサーが伸びていく。
   幅はJSがインラインで書く（.kk-band の --kk-band-w より後勝ちになる）。
   新しい部品は作らない——サイトが既に持っている織りが伸びるだけ。 */
.rd__progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    --kk-band-h: 4px;
}

/* 通し番号は明朝の等幅数字。日記の回次（.lrow__n）と同じ面の作り方。
   行が再生の的になったので、いま鳴っている1本はここを塗って示す
   （.kk-thread__node--self ／ .rd__reel-seg--now と同じ手。新しい印は足さない） */
.rd__no {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    white-space: nowrap;
    justify-self: start;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    transition: background 0.25s ease, color 0.25s ease;
}

.rd__track.is-playing .rd__no {
    background: var(--grad-accent);
    color: var(--text-on-accent-dark);
}

.rd__title {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--text-primary);
}

/* 見出し文。「格好いい」「噂話」「文化の継承」——題だけでは何の話か伝わらないので、
   題の下に一行置いて目録を読み物にする。
   組みは旧サイト期日記の目録（.lrow__t small）と同じ寸法・同じ色で、新しい装飾は足さない。
   音のトラック（.rd__se）には付かない。語りの行だけが言葉を持ち、あいだの音は名前と尺
   だけ——その差がそのまま「読むところ／通り過ぎるところ」の区別になる。 */
.rd__title small {
    display: block;
    margin-top: 3px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* 題はリンクではない（テンプレート側の註を参照）。行が再生の的なので、
   小さなリンクを大きな的の上に乗せない。押し間違いが事故にならないようにする。 */

.rd__kind {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 尺は朗読の軸。日記の日付（.dp__voice-day）と同じ明朝の等幅で組み、
   添え物にならない級数にする。通し番号（.rd__no）と同じ面に乗る */
.rd__dur {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 1本ページへの的。行の右端に、題から物理的に離して置く。
   前は題そのものをリンクにしていたが、行 860×74 に対して 65×21（行の2.1%）しかなく、
   まわりを押すと行の再生ボタンに当たって音が鳴っていた（Issue #194・elementFromPoint で実測）。
   44px 角を下回らせないのがこの部品の眼目で、寸法は押しやすさの下限そのもの。
   見た目は1本ページの前後ナビ（.rd__nav a）と同じ丸い枠の作り方＝サイトが既に持っている語彙で、
   色も新しく足していない（枠 --border-strong ／ 地 transparent ／ hover で --bg-inset と --accent）。
   矢印は → の一字。--accent-strong は文字色に使わない（24px 未満は不可）ので枠と焦点にだけ使う。 */
.rd__to {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* 的の当たりを 44×44 の四角ぜんぶにする。
   丸い枠のままだと角の当たりが枠の外に落ち、そこを押した人には行の再生が起きる
   ——直そうとしている不具合そのものが的の四隅で再発する（実測で確認した）。
   見た目は丸のまま、当たりだけ四角に戻す。
   -1px なのは inset の基準が padding box だから——0 だと 1px の枠のぶんだけ
   四角が内側に縮み、いちばん外の一列がまた行の再生に落ちる。 */
a.rd__to::after {
    content: "";
    position: absolute;
    inset: -1px;
}

a.rd__to:hover,
a.rd__to:focus-visible {
    background: var(--bg-inset);
    border-color: var(--accent);
}

a.rd__to:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* 矢印は「進む」を示す動きだけ持つ。位置は動かさないので行の的は崩れない */
.rd__to-arrow {
    transition: transform 0.3s ease;
}

a.rd__to:hover .rd__to-arrow {
    transform: translateX(3px);
}

/* 投稿がまだ無い行。同じ寸法の空きだけ残して、押せる的は出さない
   （枠も矢印も持たないので「押せそうに見えて押せない」が起きない） */
.rd__to--none {
    border-color: transparent;
}

/* JSが無いときだけ見えるネイティブプレイヤー。行の全列にまたがって2段目に置く
   （グリッドの列数が変わっても崩れないよう -1 まで） */
.rd__audio {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 520px;
    height: 36px;
    margin-top: 4px;
}

/* ================================
   語りのあいだ（ジングル・演奏）
   ================================
   音のトラック10本は行にしない。読み物ではないので、行にすると目録が
   15行から25行に水増しされ「語り15本」という作品の輪郭がぼやける。
   あいだ1つにつきミンサーの帯を1本だけ立て、その上に名前を小さく置く。 */

/* 区切りは帯そのものが担うので、行のような境界線は引かない */
.rd__interlude {
    padding: 14px 12px 0;
}

/* 帯を持たない「おわり」の塊だけ、下に余白を持たせて目録を閉じる */
.rd__interlude:last-child {
    padding-bottom: 8px;
}

.rd__interlude-label {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* 語りの行より一段弱く、少し内側に寄せる。読み物ではないことを面で示す */
.rd__se {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--space-2);
    align-items: baseline;
    /* 語りの行と同じく、行そのものが再生の的になる。44px を下回らせない。
       右の余白を持たないのは、尺のあとの空き（下の .rd__se .rd__dur）で
       語りの行の的1つぶんを数えているため。二重に足すとそのぶんずれる。 */
    padding: 11px 0 11px 1.6em;
    border-radius: var(--radius-input);
    transition: background 0.25s ease;
}

/* 音のトラックの尺だけ、右に的1つぶんの空きを持たせる。
   語りの行の右端には1本ページへの的（44px ＋ 列のあいだ）が立つので、同じぶんを
   空けておかないと尺が語りの行と音のトラックで52px ずれて2列に見える。
   尺はこの作品の軸なので揃える。音のトラックに的は出さない（投稿が無い）ので
   空くのは余白だけ。行そのものの当たりは幅いっぱいのまま変わらず、JSが無いときの
   ネイティブプレイヤー（列をまたいで敷かれる）の幅も変わらない
   ——行の padding ではなくこの列に持たせているのはそのため。 */
.rd__se .rd__dur {
    margin-right: calc(44px + var(--space-2));
}

.rd__se-name {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* 種別ラベル（.rd__se-kind）は持たない。音のトラックは10本すべてが演奏なので、
   16「笛」にだけ「演奏」と添えると「ほかは演奏ではない」と読めてしまう
   （2026-08-23 本人確認）。16 の違いは尺と帯の織りの長さが示している。 */

.rd__se .rd__audio {
    max-width: 420px;
    height: 32px;
    opacity: 0.9;
}

/* .kk-band（components.css）に寸法だけ渡す。帯そのものは定義し直さない。
   --kk-band-h はテンプレートが「そのあいだの長さ」に応じて上書きする（5〜10px）ので、
   ここに書いてあるのは値が来なかったときの下限。 */
.rd__band {
    --kk-band-h: 5px;
    --kk-band-w: 100%;
    --kk-band-pos: left center;
    display: block;
    margin: 8px 0 14px;
    opacity: 0.55;
}

/* ================================
   よむ の行（原稿4本）
   ================================
   列は 題・出自 の2つだけ。よむに通し番号は無く（番号の有無そのものが
   きく と よむ の区別になっている）、制作年も分からないので日付も出さない。 */

.rd__read {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--space-2);
    align-items: baseline;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-mid);
    text-decoration: none;
    color: inherit;
    transition: background 0.25s ease;
}

a.rd__read:hover {
    background: var(--bg-inset);
}

a.rd__read:focus-visible {
    background: var(--bg-inset);
    outline: 2px solid var(--accent-strong);
    outline-offset: -2px;
}

/* 投稿がまだ無い原稿。輪郭のまま出す（リンクにしない） */
.rd__read--flat .rd__read-title {
    color: var(--text-muted);
}

.rd__read-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.rd__read-source {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 「次へ」「2分10秒から続ける」（.rd__next）は css/components/roudoku-next.css へ
   移した。1本ページでも同じ場面——play() を断られたので人の指で1回押してもらう——が
   起きるようになったので、両方から読める components/ に置いてある。
   見た目は変えていない。 */

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

@media (max-width: 768px) {
    .rd__door-body {
        padding: 20px 18px 18px;
    }

    .rd__door .rd__reel-strip {
        height: 34px;
    }

    .rd__door .rd__reel-seg--se {
        --kk-band-h: 8px;
    }

    /* 面。狭い画面でも題の級数は clamp が持つので、ここで詰めるのは余白と
       まわりの数だけ。押すものの大きさ（52px）は落とさない */
    .rd__now-no {
        font-size: 1.15rem;
        padding: 3px 12px;
    }

    .rd__now-dur {
        font-size: 1.2rem;
    }

    .rd__now > .rd__reel {
        margin-top: 18px;
    }

    .rd__sleep-opt {
        min-width: 92px;
        padding: 12px 16px;
    }

    /* 種別は落として 通し番号 ・ 題 ・ 尺 ・ 的 の4列にする。
       的は落とさない——狭い画面で外して押すのがそもそもの不具合なので、
       ここで消したら直したことにならない */
    .rd__track {
        grid-template-columns: 2.8em 1fr auto auto;
        padding: 9px 8px;
    }

    .rd__kind {
        display: none;
    }

    .rd__interlude {
        padding: 12px 8px 0;
    }

    .rd__read {
        padding: 15px 8px;
    }
}

@media (max-width: 480px) {
    .rd__spec {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .rd__playall {
        width: 100%;
        padding: 14px 20px;
    }

    /* 題は最長でも8字なので、狭い画面でも 通し番号 ・ 題 ・ 尺 ・ 的 の4列を保てる。
       列のあいだを詰めるのは的の44px角を削らないため（削ると直した意味が消える） */
    .rd__track {
        grid-template-columns: 2.6em 1fr auto auto;
        gap: 4px 10px;
    }

    /* 列のあいだが 10px になったので、音のトラック側の空きも同じだけ詰める
       （尺の右端を語りの行と揃えたままにする） */
    .rd__se .rd__dur {
        margin-right: calc(44px + 10px);
    }

    .rd__read {
        grid-template-columns: 1fr;
    }
}

/* ================================
   アクセシビリティ
   ================================ */

@media (prefers-reduced-motion: reduce) {
    .rd__track,
    .rd__se,
    .rd__read,
    .rd__to,
    .rd__to-arrow,
    .rd__no,
    .rd__summary,
    .breadcrumb a,
    .rd__playall,
    .rd__sleep-opt {
        transition: none;
    }

    .rd__playall:hover,
    a.rd__to:hover .rd__to-arrow {
        transform: none;
    }
}

/* ================================
   日本語の折り返し
   ================================
   説明文は「あ／いだにジングルが入ります」のように句の途中で割れていた。
   日本語は禁則文字以外どこでも折れるため、素のままだと語の途中に改行が落ちる。

   word-break: auto-phrase … 文節の切れ目で折る（Chromium系）。
   text-wrap: pretty        … 最終行の孤立語を減らす（.dp__lead の前例に倣う）。

   どちらも未対応のブラウザでは今までどおりの折り返しに戻るだけで壊れない。
   新しい色も装飾も足していない。 */

.rd__lead,
.rd__section-note,
.rd__door-note,
.rd__list-note,
.rd__reel-caption,
.rd__now-title,
.rd__now-lead,
.rd__sleep-note {
    word-break: auto-phrase;
    text-wrap: pretty;
}