/* 竖版时间线的样式。颜色都是变量，深色模式只重定义变量。 */
:root {
  --tl-bg: #FFFFFF; --tl-ink: #17202C; --tl-muted: #5B6677; --tl-rule: #D5DBE4;
  --tl-po: #2B59C9; --tl-rf: #B56200; --tl-sync: #7446BE; --tl-bad: #C4362B; --tl-ok: #1B7A46;
  --tl-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --tl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tl-bg: #161B23; --tl-ink: #E3E7EE; --tl-muted: #9AA4B3; --tl-rule: #2C3441;
    --tl-po: #7EA2FF; --tl-rf: #F0A43A; --tl-sync: #B593F2; --tl-bad: #FF7A6E; --tl-ok: #5BCB8C;
  }
}
:root[data-theme="dark"] {
  --tl-bg: #161B23; --tl-ink: #E3E7EE; --tl-muted: #9AA4B3; --tl-rule: #2C3441;
  --tl-po: #7EA2FF; --tl-rf: #F0A43A; --tl-sync: #B593F2; --tl-bad: #FF7A6E; --tl-ok: #5BCB8C;
}

.tl-card {
  box-sizing: border-box; max-width: 100%; margin: 0; padding: 12px 14px;
  display: grid; gap: 8px; align-content: start;
  background: var(--tl-bg); color: var(--tl-ink); border: 1px solid var(--tl-rule); border-radius: 10px;
  font: 14px/1.5 var(--tl-body);
}
.tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; }
.tl-title { font-weight: 600; }
.tl-btn {
  font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--tl-po); background: transparent; color: var(--tl-po);
}
.tl-btn[aria-pressed="true"] { background: var(--tl-po); color: var(--tl-bg); }
.tl-btn:focus-visible { outline: 2px solid var(--tl-po); outline-offset: 2px; }
.tl-svg { display: block; width: 100%; height: auto; margin-inline: auto; }

.tl-res { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tl-res code { font: 600 13.5px var(--tl-mono); }
.tl-mark { font-weight: 600; }
.tl-res.bad code, .tl-res.bad .tl-mark { color: var(--tl-bad); }
.tl-res.ok code, .tl-res.ok .tl-mark { color: var(--tl-ok); }
.tl-why { font-size: 13px; color: var(--tl-muted); }

.tl-legend {
  display: flex; flex-wrap: wrap; gap: 2px 12px; padding-top: 6px;
  border-top: 1px solid var(--tl-rule); font-size: 12px; color: var(--tl-muted);
}
.tl-legend span { display: inline-flex; align-items: center; gap: 3px; }
.tl-ic { width: 22px; height: 14px; }

.tl-grid { stroke: var(--tl-rule); stroke-dasharray: 2 4; }
.tl-sep { stroke: var(--tl-rule); }
.tl-tick { font: 10.5px var(--tl-mono); fill: var(--tl-muted); }
.tl-lane { font: 600 13px var(--tl-body); fill: var(--tl-ink); }
.tl-code { font: 11px var(--tl-mono); fill: var(--tl-ink); }
.tl-fly { stroke: var(--tl-muted); stroke-width: 1.6; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.tl-tail { stroke: var(--tl-muted); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .55; }
.tl-iss { fill: var(--tl-ink); }
.tl-dia { fill: var(--tl-ink); }
.tl-dia.bad { fill: var(--tl-bad); }
.tl-dia.ok { fill: var(--tl-ok); }
.tl-val { font: 600 11.5px var(--tl-mono); fill: var(--tl-ink); }
.tl-val.bad { fill: var(--tl-bad); }
.tl-val.ok { fill: var(--tl-ok); }

.tl-e-rf { stroke: var(--tl-rf); stroke-width: 1.3; }
.tl-e-keep { stroke: var(--tl-po); stroke-width: 3; stroke-linecap: round; }
.tl-e-kept { stroke: var(--tl-po); stroke-width: 1.4; stroke-opacity: .45; }
.tl-e-rev { stroke: var(--tl-bad); stroke-width: 2; stroke-dasharray: 5 4; }
.tl-mk-rf { fill: var(--tl-rf); }
.tl-mk-keep, .tl-mk-kept { fill: var(--tl-po); }
.tl-mk-kept { fill-opacity: .45; }

.tl-reg { fill: var(--tl-muted); }
.tl-stale { fill: var(--tl-bg); stroke: var(--tl-ink); stroke-width: 1.4; }
.tl-sc { fill: var(--tl-ink); }
.tl-fence { stroke: var(--tl-ink); stroke-width: 3; }
.tl-fence-t { font: 600 10.5px var(--tl-mono); fill: var(--tl-ink); }
.tl-e-sync { stroke: var(--tl-sync); stroke-width: 1.6; }
.tl-mk-sync { fill: var(--tl-sync); }
.tl-e-free { stroke: var(--tl-muted); stroke-width: 1.6; stroke-dasharray: 3 4; }