/* 铁人三项：三段配色（游泳蓝 / 骑行琥珀 / 跑步红）+ 占比条与分段表 */

/* 字段多、面板高，不做悬浮，避免小屏底部按钮被卡在视口外 */
#triTool { position: static; }

.tri-split { padding: 14px 20px 0; }
.tri-bar {
    display: flex; height: 12px; overflow: hidden;
    border-radius: 4px; background: var(--x2-surface-2);
}
.tri-bar i { display: block; height: 100%; transition: width .25s ease; }
.tri-bar .swim { background: var(--x2-swim); }
.tri-bar .bike { background: var(--x2-bike); }
.tri-bar .run { background: var(--x2-run); }
.tri-bar .tt { background: var(--x2-line-strong); }

.tri-legend {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 16px; margin: 10px 0 0; padding: 0; list-style: none;
}
.tri-legend li {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; color: var(--x2-ink-2);
}
.tri-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.tri-legend .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tri-legend .dot.swim { background: var(--x2-swim); }
.tri-legend .dot.bike { background: var(--x2-bike); }
.tri-legend .dot.run { background: var(--x2-run); }
.tri-legend .dot.tt { background: var(--x2-line-strong); }
.tri-legend .v { font-family: var(--x2-mono); font-size: 11.5px; color: var(--x2-ink); white-space: nowrap; }

/* 目标反推 */
.tri-reverse {
    margin-top: 4px; padding: 14px 16px;
    border: 1px solid var(--x2-line); border-radius: var(--x2-r-sm);
    background: var(--x2-surface);
}
.tri-empty { margin: 0; font-size: 13.5px; color: var(--x2-muted); }
.tri-rev-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
    padding-bottom: 8px; margin-bottom: 2px;
    border-bottom: 1px solid var(--x2-line);
    font-size: 12.5px; color: var(--x2-muted);
}
.tri-rev-head b { font-family: var(--x2-mono); color: var(--x2-ink); font-weight: 600; }
.tri-rev-row {
    display: grid; grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 10px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px dashed var(--x2-line);
    font-size: 13.5px;
}
.tri-rev-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.tri-rev-k { display: inline-flex; align-items: center; gap: 6px; color: var(--x2-ink-2); }
.tri-rev-k .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tri-rev-k .dot.swim { background: var(--x2-swim); }
.tri-rev-k .dot.bike { background: var(--x2-bike); }
.tri-rev-k .dot.run { background: var(--x2-run); }
.tri-rev-t { font-family: var(--x2-mono); color: var(--x2-ink); }
.tri-rev-p { font-family: var(--x2-mono); font-size: 12px; color: var(--x2-muted); white-space: nowrap; }

/* 分段表数字列 */
#triSplits .x2-num { white-space: nowrap; }

@media (max-width: 560px) {
    .tri-legend { grid-template-columns: 1fr; }
    .tri-rev-row { grid-template-columns: 64px minmax(0, 1fr); }
    .tri-rev-p { grid-column: 2; font-size: 11.5px; }
}