/* ==========================================================
   觀點網 —— 全時數據頁樣式（/realtime）
   依赖 main.css 中的设计变量、麵包屑、加載更多
   ========================================================== */


/* ---------- 標題 ---------- */
.rt-head{display:flex;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.rt-head h1{flex:none;font:700 32px/1.2 var(--serif);letter-spacing:-.01em;border-left:5px solid var(--brand);padding-left:12px}
.rt-kw{min-width:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 工具條（吸頂） ---------- */
.rt-bar{position:sticky;top:var(--sticky-top,65px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;
        height:54px;background:var(--paper);border-bottom:1px solid var(--line)}
.rt-bar__clock{display:flex;align-items:center;gap:12px;min-width:0;font-size:13px;white-space:nowrap}
.rt-bar__clock b{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
/* 直播紅點：緩慢脈衝 */
.rt-bar__clock b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);animation:rt-pulse 2s ease-out infinite}
.rt-bar__clock time{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--brand)}
.rt-bar__tools{display:flex;align-items:center;gap:10px}
.rt-tip{font-size:12px;color:var(--ink-3);white-space:nowrap;opacity:0;transform:translateX(6px);
        transition:opacity .25s ease,transform .25s ease}
.rt-tip.is-show{opacity:1;transform:none}
.rt-tip.is-error{color:var(--brand)}

.rt-tool{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;
         border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
         color:var(--ink-2);font-size:12.5px;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.rt-tool:hover{border-color:var(--brand);color:var(--brand)}
.rt-tool:active{transform:translateY(1px)}
.rt-tool:disabled{cursor:default}

/* 字號：分段按鈕 */
.rt-size{display:inline-flex;align-items:stretch;height:30px;border:1px solid var(--line-2);border-radius:var(--r);
         background:var(--card);overflow:hidden}
.rt-size__label{display:flex;align-items:center;padding:0 8px 0 10px;font-size:12.5px;color:var(--ink-3)}
.rt-size button{min-width:30px;border:0;border-left:1px solid var(--line);background:none;
                font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.rt-size button:hover{color:var(--brand)}
.rt-size button[aria-pressed="true"]{background:var(--ink);color:var(--dark-text)}

/* 自動更新：開關 */
.rt-switch{position:relative;flex:none;width:28px;height:16px;border-radius:8px;background:var(--line-2);transition:background-color .2s ease}
.rt-switch::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
                  background:var(--card);box-shadow:0 1px 2px oklch(19.4% .006 56 / .3);transition:transform .25s var(--media-ease)}
.rt-auto[aria-checked="true"]{color:var(--ink)}
.rt-auto[aria-checked="true"] .rt-switch{background:var(--brand)}
.rt-auto[aria-checked="true"] .rt-switch::after{transform:translateX(12px)}

.rt-refresh svg{flex:none}
.rt-bar.is-refreshing .rt-refresh{color:var(--brand)}
.rt-bar.is-refreshing .rt-refresh svg{animation:loadmore-spin .8s linear infinite}

/* ---------- 時間軸 ---------- */
.rt-list{position:relative;padding-top:4px}
/* 左側豎線 */
.rt-list::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--line)}
.rt-item{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;
         padding:15px 8px 15px 26px;border-bottom:1px dotted var(--line)}
/* 時間點 */
.rt-item::before{content:"";position:absolute;left:0;top:23px;width:9px;height:9px;box-sizing:border-box;
                 border:2px solid var(--line-2);border-radius:50%;background:var(--paper);transition:border-color .2s ease}
.rt-item:hover::before{border-color:var(--brand)}
.rt-time{font:13px/1 var(--mono);font-variant-numeric:tabular-nums;color:#999}
.rt-text{font-size:16px;line-height:1.8;color:var(--ink-2);overflow-wrap:anywhere;text-align:justify}
.rt-title{margin-right:.6em;font-weight:700;color:var(--ink)}
.rt-title:hover{color:var(--brand)}
.rt-list[data-size="sm"] .rt-text{font-size:14px}
.rt-list[data-size="lg"] .rt-text{font-size:19px;line-height:1.75}

/* 日期分隔 */
.rt-day{position:relative;padding:24px 0 6px 26px}
.rt-day::before{content:"";position:absolute;left:-1px;top:29px;width:11px;height:11px;box-sizing:border-box;
                border:2px solid var(--paper);border-radius:50%;background:var(--ink)}
.rt-day span{display:inline-block;padding:4px 10px;border-radius:2px;background:var(--ink);color:var(--dark-text);
             font-size:12px;font-weight:600;letter-spacing:.06em}
.rt-list > .rt-day:first-child{padding-top:14px}
.rt-list > .rt-day:first-child::before{top:19px}

/* 新消息：底色由淺紅漸隱，時間點變實心 */
.rt-item.is-fresh{animation:rt-fresh 3.5s ease-out}
.rt-item.is-fresh::before{border-color:var(--brand);background:var(--brand)}

/* 骨架屏尺寸 */
.rt-item.is-skeleton .sk--time{width:40px;height:12px}
.rt-item.is-skeleton .sk--title{width:62%;height:16px;margin-top:0}

@keyframes rt-fresh{0%,35%{background-color:var(--brand-soft)}100%{background-color:transparent}}
@keyframes rt-pulse{
  0%{box-shadow:0 0 0 0 oklch(49.7% .202 29.6 / .45)}
  70%{box-shadow:0 0 0 7px oklch(49.7% .202 29.6 / 0)}
  100%{box-shadow:0 0 0 0 oklch(49.7% .202 29.6 / 0)}
}
@media(prefers-reduced-motion:reduce){
  .rt-bar__clock b::before,.rt-item.is-fresh{animation:none}
  .rt-bar.is-refreshing .rt-refresh svg{animation-duration:1.6s}
}