/* SHRS 大事記年表 — 前台樣式
   以 .shrs-tl 前綴提高強度，並對佈景主題常覆蓋的屬性加 !important，避免被主題樣式干擾。 */

.shrs-tl {
    --shrs-tl-dark: #1c1c1c;
    --shrs-tl-hover: #3d3d3d;
    --shrs-tl-line: #d8dee6;
    --shrs-tl-text: #2a2f36;
    --shrs-tl-muted: #6b7480;
    max-width: 880px;
    margin: 1.5em auto;
    color: var(--shrs-tl-text);
    font-size: 16px;
    line-height: 1.7;
}

.shrs-tl, .shrs-tl * { box-sizing: border-box; }

/* 共同：本外掛所有按鈕都先清掉主題的漸層 / 陰影 / 外觀 / 內距 */
.shrs-tl button {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    outline: none;
    line-height: normal !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    letter-spacing: normal;
    -webkit-text-fill-color: currentColor !important;  /* 抵銷主題的漸層文字 / text-fill 設定 */
}

/* ---------- 工具列 ---------- */
.shrs-tl .shrs-tl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-bottom: 1.8em;
}

/* ---------- 語言切換（深色分段控制） ---------- */
.shrs-tl .shrs-tl-lang {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    gap: 4px;
    background: #ececec !important;
    background-image: none !important;
    border-radius: 999px;
}
.shrs-tl .shrs-tl-lang-btn {
    border: 0 !important;
    background: transparent !important;
    min-width: 42px;
    width: auto;
    height: 34px;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s;
}
/* 文字色設在 span 子元素，避免被主題的 `button{color:...!important}` 蓋掉 */
.shrs-tl .shrs-tl-lang-btn span {
    color: var(--shrs-tl-dark) !important;
    -webkit-text-fill-color: var(--shrs-tl-dark) !important;
}
.shrs-tl .shrs-tl-lang-btn.is-active {
    background: var(--shrs-tl-dark) !important;
}
.shrs-tl .shrs-tl-lang-btn.is-active span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ---------- 年份圓形藥丸 + 左右箭頭 ---------- */
.shrs-tl .shrs-tl-years {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
}
.shrs-tl .shrs-tl-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #4a4a4a !important;
    cursor: pointer;
    border-radius: 50% !important;
    transition: background-color .15s, opacity .15s;
}
.shrs-tl .shrs-tl-nav:hover { background: rgba(0, 0, 0, .06) !important; }
.shrs-tl .shrs-tl-nav[disabled] { opacity: .25; cursor: default; pointer-events: none; }
/* 顏色設在 svg 子元素（主題 button 規則碰不到），確保箭頭可見 */
.shrs-tl .shrs-tl-nav svg { display: block; color: #4a4a4a !important; }
.shrs-tl .shrs-tl-nav svg path { stroke: currentColor !important; }

.shrs-tl .shrs-tl-years-track {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge */
    /* 上下留白讓作用中圓圈的陰影不被 overflow 裁切（先前呈現方形邊） */
    padding: 14px 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.shrs-tl .shrs-tl-years-track::-webkit-scrollbar { display: none; }

.shrs-tl .shrs-tl-year-pill {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: var(--shrs-tl-dark) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap !important;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 文字色設在 span（主題 `button{color:#fff!important}` 只命中 button 本身，碰不到 span） */
.shrs-tl .shrs-tl-year-pill span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-block;
}
.shrs-tl .shrs-tl-year-pill:hover { transform: translateY(-2px); }
/* 滑鼠移入色（可於後台調整；非作用中才變色） */
.shrs-tl .shrs-tl-year-pill:not(.is-active):hover {
    background: var(--shrs-tl-hover) !important;
}
.shrs-tl .shrs-tl-year-pill.is-active {
    background: #fff !important;
    box-shadow: inset 0 0 0 2px var(--shrs-tl-dark), 0 4px 14px rgba(0, 0, 0, .12) !important;
}
.shrs-tl .shrs-tl-year-pill.is-active span {
    color: var(--shrs-tl-dark) !important;
    -webkit-text-fill-color: var(--shrs-tl-dark) !important;
}

/* 「全部 / ALL」做成膠囊形，與圓形年份做出區隔 */
.shrs-tl .shrs-tl-year-pill.shrs-tl-year-all {
    width: auto !important;
    min-width: 66px;
    padding: 0 22px !important;
    border-radius: 999px !important;
}

/* ---------- 年表主體 ---------- */
.shrs-tl .shrs-tl-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    counter-reset: none !important;
}
.shrs-tl .shrs-tl-list::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--shrs-tl-line);
}
.shrs-tl .shrs-tl-item {
    position: relative;
    padding: 0 0 1.6em 34px !important;
    margin: 0 !important;
    list-style: none !important;
}
.shrs-tl .shrs-tl-item::marker { content: none !important; }
.shrs-tl .shrs-tl-item::before {
    content: "" !important;
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--shrs-tl-dark);
    box-sizing: border-box;
}
.shrs-tl .shrs-tl-date {
    font-weight: 700;
    color: var(--shrs-tl-dark);
    margin-bottom: 2px;
    font-size: 15px;
    letter-spacing: .2px;
}
.shrs-tl .shrs-tl-body p { margin: 0 0 .3em; }
.shrs-tl .shrs-tl-body p:last-child { margin-bottom: 0; }
.shrs-tl .shrs-tl-body a { color: var(--shrs-tl-dark); text-decoration: underline; }
.shrs-tl .shrs-tl-body ul,
.shrs-tl .shrs-tl-body ol { margin: .2em 0 .4em; padding-left: 1.4em; }
.shrs-tl .shrs-tl-body li { margin: 0; }

/* ---------- 語言顯示切換 ---------- */
.shrs-tl[data-lang="zh"] .shrs-tl-date-en,
.shrs-tl[data-lang="zh"] .shrs-tl-desc-en { display: none; }
.shrs-tl[data-lang="en"] .shrs-tl-date-zh,
.shrs-tl[data-lang="en"] .shrs-tl-desc-zh { display: none; }

/* ---------- 狀態 ---------- */
.shrs-tl .shrs-tl-empty,
.shrs-tl .shrs-tl-noresult {
    padding: 1.5em;
    text-align: center;
    color: var(--shrs-tl-muted);
    background: #f6f8fa;
    border-radius: 10px;
}

@media (max-width: 782px) {
    .shrs-tl .shrs-tl-toolbar { gap: 10px 12px; }
    .shrs-tl .shrs-tl-years { flex: 1 1 100%; }
}
@media (max-width: 600px) {
    .shrs-tl { font-size: 15px; }
    .shrs-tl .shrs-tl-year-pill { width: 52px; height: 52px; font-size: 15px; }
    .shrs-tl .shrs-tl-years-track { gap: 10px; }
    .shrs-tl .shrs-tl-nav { width: 30px; height: 30px; }
    .shrs-tl .shrs-tl-item { padding-left: 28px !important; }
}