/* ---------- 本頁主題側欄（topic-rail）：左側浮動導覽，點一下直接跳到該段 ---------- */
.topic-rail{
  position:fixed; left:10px; top:50%; transform:translateY(-50%);
  z-index:60; display:none; padding:10px;
  border:1px solid transparent; border-radius:18px; background:transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (min-width:1280px){ .topic-rail{ display:block; } }
body.no-topic-rail .topic-rail{ display:none !important; }

.topic-rail:hover,
.topic-rail:focus-within{
  background:rgba(255,255,255,.94);
  border-color:var(--line);
  box-shadow:0 18px 40px -24px rgba(27,26,51,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

.topic-rail ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.topic-rail a{
  display:flex; align-items:center; gap:0;
  padding:7px 8px; border-radius:12px;
  color:var(--ink-2); text-decoration:none; font-size:.88rem; line-height:1.4;
}
.topic-rail a:hover{ background:var(--indigo-50); color:var(--indigo-700); }
.topic-rail a:focus-visible{ outline:2px solid var(--indigo-500); outline-offset:2px; }

.topic-rail__dot{
  flex:0 0 auto; width:8px; height:8px; border-radius:99px;
  background:var(--indigo-200);
  transition:height .2s ease, background .2s ease;
}
.topic-rail a:hover .topic-rail__dot{ background:var(--indigo-400); }
.topic-rail a.is-active .topic-rail__dot{ height:22px; background:var(--indigo-500); }
.topic-rail a.is-active{ color:var(--indigo-700); font-weight:700; }

.topic-rail__label{
  max-width:0; margin-left:0; opacity:0;
  overflow:hidden; white-space:nowrap;
  transition:max-width .28s ease, margin-left .28s ease, opacity .2s ease;
}
.topic-rail:hover .topic-rail__label,
.topic-rail:focus-within .topic-rail__label{ max-width:230px; margin-left:10px; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .topic-rail, .topic-rail *{ transition:none !important; }
}