/* ----------------------------------------------------------
   MLY Timeline — Lite v0.4.x
   左列日期 + 大圆点 / 右侧卡片 / 分类筛选（分段胶囊）
   桌面：悬浮数字徽标（不被裁剪）
   移动：按钮内数字徽标（零 JS、不卡顿）
   ---------------------------------------------------------- */

/* ===== 容器 & 主题兼容 ===== */
.mly-timeline-wrap{max-width:980px;margin:2rem auto 4rem;padding:0 18px}
.mly-timeline,.mly-timeline li{list-style:none;margin:0;padding:0}
.mly-timeline li::marker{content:""} .mly-timeline li::before{content:none}
.entry-content .mly-timeline,.entry-content .mly-timeline li,
.prose .mly-timeline,.prose .mly-timeline li{list-style:none!important;margin:0!important;padding:0!important}
.entry-content .mly-timeline li::before,.prose .mly-timeline li::before{content:none!important}

/* ===== 年份标题 ===== */
.mly-tl-year{font-size:26px;font-weight:800;margin:3rem 0rem 2rem 5rem}

/* ======= Segmented 过滤器（居中 + 圆角底盘 + 阴影） ======= */
.mly-tl-filter{
  display:flex; align-items:center; gap:.25rem;
  width:fit-content !important;            /* 修正写法 */
  margin:5rem auto 1.4rem;
  padding:.45rem .5rem;
  border:1px solid #e5e7eb; background:#fff; border-radius:999px;
  box-shadow:0 8px 28px rgba(17,24,39,.06);
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mly-tl-filter::-webkit-scrollbar{ display:none; }

.mly-tl-filter button{
  appearance:none; border:0; background:transparent;
  padding:.6rem 1.3rem; border-radius:999px;
  font-size:12px; line-height:1.2; color:#111827; white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .06s ease;
  position:relative;
}
.mly-tl-filter button:hover{ background:#f3f4f6; }
.mly-tl-filter button:active{ transform:scale(.98); }
.mly-tl-filter button.is-active{ background:#111827; color:#fff; }
.mly-tl-filter button[style*="--chip"]{
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 45%, transparent);
}
.mly-tl-filter button[style*="--chip"]:hover{
  background: color-mix(in srgb, var(--chip) 10%, #f8fafc);
}

/* ===== 主线与两列网格（仅用“每条 li 画线”方案，避免断线） ===== */
.mly-timeline{
  --line-x:   84px;   /* 主线/圆点的 X 坐标（越小越靠左） */
  --left-col: 72px;   /* 左列日期列宽 */
  --col-gap:  22px;   /* 左列与卡片间距 */
  --dot:      12px;   /* 圆点直径 */
  --dot-top:  12px;   /* 圆点到 li 顶部偏移 */
  --item-gap: 28px;   /* 每条之间竖向间距（决定“跨过去”的线长） */
  --year-tail: 14px;  /* 最后一条向下再延伸的“收尾”长度 */
  position:relative;
}
/* 不在 ul/年份容器上画整条线，避免重叠/超出 */
.mly-year-group::before,
.mly-timeline::before{ display:none !important; }

.mly-item-grid{
  display:grid;
  grid-template-columns: var(--left-col) 1fr;
  column-gap: var(--col-gap);
  align-items:flex-start;
}

.mly-left{ position:static; }
.mly-left-date{
  display:block; text-align:right; padding-right:8px;
  font-feature-settings:"tnum"; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:#6b7280; line-height:2.5;
}

.mly-timeline-item{ position:relative; margin:0 0 var(--item-gap); }

.mly-dot{
  position:absolute;
  left: calc(var(--line-x) - (var(--dot) / 2));
  top: var(--dot-top);
  width: var(--dot); height: var(--dot);
  border-radius:999px; background:#10b981;
  box-shadow:0 0 0 4px #fff;
  z-index: 999;
}

/* 连接到“下一条”的线段 */
.mly-timeline-item::after{
  content:"";
  position:absolute;
  left: calc(var(--line-x) - 1px);                  /* 与主线对齐 */
  top:  calc(var(--dot-top) + var(--dot)/2);        /* 从圆点中心往下 */
  height: calc(100% - var(--dot-top) - var(--dot)/2 + var(--item-gap));
  width:2px; background:#e5e7eb; pointer-events:none;
}
/* 最后一条：只延伸到该年份结尾（加少量尾巴） */
.mly-timeline-item:last-child::after{
  height: calc(100% - var(--dot-top) - var(--dot)/2 + var(--year-tail));
}

.mly-year-group{ margin-bottom:36px; }

/* 右侧卡片 */
.mly-card{ border-radius:18px; padding:0 0 40px 20px; }
.mly-top{ margin-bottom:.25rem; }
.mly-tl-chip{
  color:#6b21a8; background:#f5f3ff; border:1px solid #e9d5ff;
  padding:.2rem .6rem; border-radius:999px; font-size:10px; line-height:1.1;
}
.mly-tl-title{ margin:.4rem 0 .4rem; font-size:17px; font-weight:800; line-height:2; letter-spacing:.1px; }
.mly-tl-excerpt{ font-size:12px; color:#374151; margin:.3rem 0 1.5rem; }
.mly-tl-cover{
  display:block; width:75%; height:auto!important; max-height:540px;
  background:none!important; object-fit:cover; border-radius:12px; margin:.35rem 0 0;
}

/* ===== 小屏优化 ===== */
@media (max-width:640px){
  .mly-timeline-wrap{padding:0 12px}
  .mly-timeline{ --line-x: 76px; --left-col: 64px; --col-gap: 18px; --dot: 10px; }
  .mly-card{padding:14px 16px}
  .mly-tl-title{font-size:1.16rem}
  .mly-left-date{font-size:.98rem}
}

/* ===== 暗色模式 ===== */
@media (prefers-color-scheme: dark){
  .mly-timeline-item::after{ background:#374151; }
  .mly-card{ background:#0f172a; border-color:#243044; box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .mly-tl-title,.mly-tl-excerpt{ color:#e5e7eb; }
  .mly-tl-excerpt{ color:#cbd5e1; }
  .mly-tl-chip{ background:#1f2937; border-color:#374151; color:#cbd5e1; }
  .mly-tl-filter{ background:#0f172a; border-color:#243044; box-shadow:0 10px 24px rgba(0,0,0,.35); }
  .mly-tl-filter button{ color:#e5e7eb; }
  .mly-tl-filter button:hover{ background:rgba(255,255,255,.06); }
  .mly-tl-filter button.is-active{ background:#60a5fa; color:#0b1220; }
}

/* ===== 降低动效偏好 ===== */
@media (prefers-reduced-motion: reduce){
  .mly-card,.mly-tl-filter button{transition:none}
}

/* ===== 桌面：悬浮数字徽标（由 JS 插入到 body） ===== */
/* 桌面禁用按钮自身 ::after，使用悬浮版 */
.mly-tl-filter button.is-active::after{ display:none; }

/* 悬浮徽标本体（fixed + transform） */
.mly-badge-float{
  position: fixed; z-index: 9999;
  left: 0; top: 0;
  transform: translate3d(-9999px,-9999px,0); will-change: transform;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #ef4444; color:#fff;
  border: 2px solid #fff; font-size: 12px; line-height: 14px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); pointer-events: none;
}
@media (prefers-color-scheme: dark){
  .mly-badge-float{ border-color:#0b1220; }
}

/* ===== 移动端：按钮内徽标（零 JS，不卡顿） ===== */
@media (pointer:coarse), (max-width:768px){
  .mly-badge-float{ display:none !important; } /* 不用悬浮版 */
  .mly-tl-filter{ padding-right: calc(22px + env(safe-area-inset-right, 0px)); } /* 防裁剪 */

  .mly-tl-filter button.is-active::after{
    content: attr(data-count);
    position: absolute; top: -6px; right: .25rem; /* 左移 3px => 改成 right: calc(.25rem + 3px) */
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: #ef4444; color: #fff;
    border: 2px solid #fff; font-size: 12px; line-height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.18);
  }
  .mly-tl-filter button.is-active[data-count="0"]::after{ display:none; }
}






/* 点击可放大：鼠标样式 */
.mly-tl-cover,
.mly-tl-body img{ cursor: zoom-in; }

/* Lightbox 遮罩与大图 */
.mly-zoom-overlay{
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
}
.mly-zoom-overlay.is-open{ display: flex; }

.mly-zoom-overlay img{
  max-width: 90vw; max-height: 90vh;
  width: auto; height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  cursor: zoom-out;
}

/* 打开时禁止页面滚动 */
body.mly-no-scroll{ overflow: hidden; }

@media (prefers-color-scheme: dark){
  .mly-zoom-overlay{ background: rgba(0,0,0,.9); }
}