/* I. タイムライン
   extracted from refine.css (was L1010-1090)
   — render_head の cssLate[] 経由で refine.css の「後」に読み込まれる。
   元ファイル内で後方にあるルールに勝つ前提で書かれているため、
   css[] (refine.css の前) に置くとカスケードが逆転する。 */

/* =====================================================================
   I. タイムライン（about + community）— 起点だけ青く灯る縦線とドットの発光
   ===================================================================== */
.timeline::before {
    background: linear-gradient(180deg, var(--accent), var(--border-bright) 120px, var(--border-bright) 85%, transparent);
}

.timeline-item::before {
    transition: box-shadow var(--dur) var(--ease-out);
}

@media (hover: hover) {
    .timeline-item:not(.is-ended):hover::before {
        box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px rgba(var(--accent-rgb), 0.15),
                    0 0 14px rgba(var(--accent-rgb), 0.4);
    }
}

/* about 現在地は「一番光る」ヒエラルキーを維持しつつ強化 */
.about-timeline .timeline-item.is-current::before {
    box-shadow: var(--timeline-now-glow);
}

/* デスクトップ: ガターを52pxへ広げ、ドット→カードのコネクタ線でレールと
   カードを物理的に接続する（about / community 共通のタイムライン語彙）。
   座標はドット(left:4px,16px幅,top:8px)とレール(left:11px)の3点セット。 */
@media (min-width: 769px) {
    .timeline-item {
        padding-left: 52px;
    }

    .timeline::before {
        left: 11px;
    }

    .timeline-item::before {
        left: 4px;
    }

    .timeline-item::after {
        content: "";
        position: absolute;
        left: 20px;
        top: 15px;
        width: 32px;
        height: 2px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), transparent);
    }

    .timeline-item.is-ended::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent);
    }

    /* カードホバー時のtranslateX(4px)で線とカードの間に隙間ができないよう、
       コネクタ線自体も4px伸ばして接続を保つ */
    .timeline-item::after {
        transition: width var(--dur) var(--ease-out);
    }

    .timeline-item:hover::after {
        width: 36px;
    }
}

/* 状態バッジは行の右端へ（日付=左 ↔ 状態=右 のスキャン可能なヘッド行） */
.timeline-head .card-tag {
    margin-left: auto;
}

/* 「終了」項目は中立色に落とし、「現役=青が灯る」の意味論を作る */
.timeline-item.is-ended .card-tag {
    color: var(--dim);
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.04);
}

.timeline-item.is-ended .timeline-date {
    color: var(--muted);
}