/* ============ 视图一：平行时间轴 ============ */
.tl-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
}
.tl-toolbar .label{font-size:12.5px;color:var(--ink-faint);letter-spacing:.1em;}
.zoom-group{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:rgba(255,252,242,.7);}
.zoom-group button{
  font-family:var(--serif);font-size:13px;padding:6px 13px;border:none;cursor:pointer;
  background:transparent;color:var(--ink-soft);border-right:1px solid var(--line);transition:all .18s;
}
.zoom-group button:last-child{border-right:none;}
.zoom-group button:hover{color:var(--ink);}
.zoom-group button.on{background:var(--vermilion);color:#f6efe0;font-weight:700;}

.tl-frame{
  position:relative;
  border:1px solid var(--ink-faint);border-radius:12px;overflow:hidden;
  background:rgba(255,252,243,.55);
  box-shadow:0 2px 14px rgba(90,70,40,.08);
}
/* —— 全屏按钮（叠在时间轴右上角，参考环球舆图） —— */
.tl-fs-btn{
  position:absolute;right:10px;top:7px;z-index:8;
  width:32px;height:30px;border:1px solid var(--line);border-radius:7px;
  background:rgba(244,237,222,.92);cursor:pointer;font-size:14px;color:var(--ink-soft);
  font-family:Georgia,serif;box-shadow:0 2px 8px rgba(60,45,20,.18);transition:color .18s;
}
.tl-fs-btn:hover{color:var(--vermilion);border-color:var(--gold);}
/* —— 全屏态：填满屏幕、垂直居中、时间轴占满可视宽度 —— */
#tlFsWrap.tl-fullscreen{
  background:var(--paper);padding:18px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:auto;
}
#tlFsWrap.tl-fullscreen .tl-frame{box-shadow:0 6px 30px rgba(90,70,40,.18);}
.tl-scroller{overflow-x:auto;overflow-y:hidden;position:relative;cursor:grab;}
.tl-scroller.dragging{cursor:grabbing;}
.tl-scroller::-webkit-scrollbar{height:11px;}
.tl-scroller::-webkit-scrollbar-track{background:var(--paper-deep);}
.tl-scroller::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:6px;border:2px solid var(--paper-deep);}
.tl-canvas{position:relative;}
.tl-axis{
  position:relative;height:52px;border-bottom:1px solid var(--ink-faint);
  background:linear-gradient(180deg, rgba(236,226,204,.9), rgba(244,237,222,.4));
}
.tick{position:absolute;bottom:0;width:1px;height:9px;background:var(--ink-faint);}
.tick.major{height:15px;background:var(--ink-soft);}
.tick-label{
  position:absolute;bottom:16px;transform:translateX(-50%);
  font-size:11px;color:var(--ink-soft);white-space:nowrap;letter-spacing:.03em;
  font-family:Georgia,var(--serif);
}
.era-band{
  position:absolute;top:0;height:18px;
  font-size:10.5px;letter-spacing:.35em;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-right:1px dashed rgba(156,143,122,.45);
}
.tl-row{position:relative;height:56px;border-bottom:1px dashed var(--line);}
.tl-row:last-child{border-bottom:none;}
.tl-row:nth-child(odd){background:rgba(120,100,60,.025);}
.tl-rowlabel{
  position:sticky;left:0;z-index:6;display:inline-flex;align-items:center;gap:7px;
  height:100%;padding:0 12px 0 14px;min-width:96px;
  background:linear-gradient(90deg, var(--paper) 78%, transparent);
  font-size:14px;font-weight:700;letter-spacing:.18em;color:var(--ink);
  pointer-events:none;
}
.tl-rowlabel i{width:8px;height:8px;border-radius:2px;flex:none;transform:rotate(45deg);}
.tl-block{
  position:absolute;top:11px;height:34px;border-radius:4px;
  font-size:12px;line-height:32px;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;border:1px solid transparent;
  color:var(--ink);letter-spacing:.04em;
  transition:transform .15s, box-shadow .15s, filter .15s;
  z-index:2;
}
.tl-block:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(80,60,30,.22);z-index:4;filter:saturate(1.2);}
.tp-marker{
  position:absolute;top:0;bottom:0;width:0;z-index:3;pointer-events:none;
  border-left:1px dashed rgba(169,50,38,.5);
}
.tp-dot{
  position:absolute;top:2px;left:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--vermilion);color:#f6efe0;font-size:10px;line-height:18px;text-align:center;
  cursor:pointer;pointer-events:auto;
  box-shadow:0 1px 4px rgba(140,36,24,.5);transition:transform .15s;
}
.tp-dot:hover{transform:scale(1.35);}
.cursor-line{
  position:absolute;top:0;bottom:0;width:0;border-left:1px solid rgba(43,38,32,.55);
  z-index:5;pointer-events:none;display:none;
}
.cursor-tag{
  position:absolute;top:56px;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);font-size:11px;padding:2px 8px;border-radius:4px;
  white-space:nowrap;font-family:Georgia,var(--serif);letter-spacing:.05em;
}
.cursor-tag small{opacity:.75;margin-left:4px;}
.tl-foot{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);
  background:rgba(236,226,204,.5);
}
.tl-foot .lg{display:inline-flex;align-items:center;gap:5px;}
.tl-foot .lg i{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);}
.tl-foot .star{color:var(--vermilion);font-weight:700;}
.tl-foot .hint{margin-left:auto;color:var(--ink-faint);}

@media (max-width:880px){
  .tl-rowlabel{min-width:78px;font-size:12.5px;letter-spacing:.08em;padding:0 8px 0 10px;}
  .tl-block{font-size:11px;}
}

/* —— 面板：朝代周期的多历法一行小字 —— */
.pp-calline{margin:0 0 12px;font-size:12px;color:var(--ink-faint);letter-spacing:.04em;}
.pp-calline .lk{
  color:var(--ink-soft);cursor:pointer;text-decoration:none;
  border-bottom:1px dashed rgba(168,134,44,.5);transition:color .18s;
}
.pp-calline .lk:hover{color:var(--vermilion);border-bottom-color:var(--vermilion);}

/* —— 面板：转折点「因果上下游」双列 —— */
.cz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cz-col{
  background:rgba(120,100,60,.04);border:1px dashed var(--line);
  border-radius:9px;padding:10px 13px;
}
.cz-head{
  font-size:11.5px;letter-spacing:.12em;color:var(--ink-faint);
  font-weight:700;margin-bottom:7px;
}
.cz-item{padding:5px 0;border-bottom:1px dashed rgba(216,203,174,.6);}
.cz-item:last-child{border-bottom:none;}
.cz-item .lk{
  color:var(--vermilion);cursor:pointer;text-decoration:none;font-size:13.5px;
  border-bottom:1px dashed rgba(169,50,38,.4);transition:all .16s;
}
.cz-item .lk:hover{border-bottom-style:solid;}
.cz-label{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.55;margin-top:2px;}
.cz-empty{color:var(--ink-faint);font-size:13px;padding:5px 0;}
/* —— 面板：⚖/📜 列出的可点按钮组 —— */
.cz-btns{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.cz-btns .mini-act{text-align:left;line-height:1.55;white-space:normal;}

@media (max-width:880px){
  .cz-grid{grid-template-columns:1fr;}
}