/**
 * 朗読の扉 ── 朗読集の姿（Issue #194）
 *
 * template-parts/roudoku-reel.php の面。一覧（archive-roudoku.php）と
 * 個別（single-roudoku.php）の両方から読まれるので components/ に置く
 * （css/components/kyou-no-mukashi.css と同じ置き方）。
 *
 * 新しい色・フォント・装飾は足していない。サイトが既に持っている語彙
 * ——ミンサーの織り（.kk-band）・アクセントの面・明朝の等幅数字——の組み替え。
 * 幅は width ではなく flex-grow で決まる（値は尺の秒数そのもの）。
 */

.rd__reel {
    margin: 0 0 var(--space-3);
}

/* 帯の本体。地は --bg-inset。語りは地を塗りつぶし、音のトラックは地の上に織りが一本通る。
   語り2本ごとに織りが立つ律動と、真ん中の4本連続（12〜15）だけ息が長いことが、
   この塗り分けでそのまま出る。 */
.rd__reel-strip {
    display: flex;
    align-items: stretch;
    gap: 1px;
    height: 28px;
    background: var(--bg-inset);
}

/* flex-basis を0にしてあるので、幅は flex-grow（＝尺の秒数）だけで決まる。
   min-width は、いちばん短い22秒の音のトラックが狭い画面で消えないための下限。 */
.rd__reel-seg {
    flex: 0 1 0;
    min-width: 2px;
}

/* 語り＝塗り。これが15本ある */
.rd__reel-seg--katari {
    background: var(--accent);
}

a.rd__reel-seg--katari {
    transition: background 0.2s ease;
}

a.rd__reel-seg--katari:hover {
    background: var(--accent-strong);
}

a.rd__reel-seg--katari:focus-visible {
    background: var(--accent-strong);
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

/* 投稿がまだ無い回。図の形は保つが、押せるようには見せない */
.rd__reel-seg--flat {
    background: var(--border-strong);
}

/* 音のトラック＝織り。面と柄は .kk-band（components.css）が持つので、
   ここでは高さと帯の中での置き方だけ差す。投稿が無いのでリンクにしない。
   16「笛」は演奏のみで1分58秒あるため、ここだけひときわ長い織りになる。隠さない。 */
.rd__reel-seg--se {
    align-self: center;
    --kk-band-h: 7px;
}

/* ================================
   現在地（個別ページ）
   ================================
   .kk-thread__node--self と同じ考え方。輪郭を足すのではなく、
   まわりを退かせて地色で「ここ」を出す。 */

.rd__reel--now .rd__reel-seg--katari {
    opacity: 0.4;
}

.rd__reel--now .rd__reel-seg--se {
    opacity: 0.4;
}

.rd__reel-seg--now,
.rd__reel--now .rd__reel-seg--now {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grad-accent);
    opacity: 1;
    overflow: hidden;
}

/* 一覧の帯では、現在地の塊も語りへのリンクのまま（個別ページでは span）。
   上の a.rd__reel-seg--katari:hover は --accent-strong の単色なので、
   このままだと指を乗せたとたん「ここ」の塗りが消える。押せることは
   カーソルと通し番号が既に言っているので、hover でも塗りは保つ */
a.rd__reel-seg--now:hover,
a.rd__reel-seg--now:focus-visible {
    background: var(--grad-accent);
}

/* 地がアクセントなので文字は紺（白は 1.94:1） */
.rd__reel-now {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text-on-accent-dark);
}

/* ================================
   目盛と読み方
   ================================ */

/* 尺は朗読における日付なので、日記の日付（.dp__nav-when）と同じ明朝の等幅で組む */
.rd__reel-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.rd__reel-caption {
    margin: 8px 0 0;
    font-size: 0.86rem;
    line-height: 1.9;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .rd__reel-strip {
        height: 24px;
    }

    /* 狭い幅では塊が数字に足りない。地色とまわりの退き方だけで現在地を示す */
    .rd__reel-now {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.rd__reel-seg--katari {
        transition: none;
    }
}