.at-timeline { --at-person-width: 190px; --at-total-width: 116px; }
.at-toolbar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.at-toolbar label { display:flex; align-items:center; gap:10px; font-size:12px; color:#64748b; }
.at-toolbar input { width:150px; }
.at-zone { margin-left:auto; font-size:12px; color:#64748b; }
.at-explanation { font-size:12px; line-height:1.6; color:#64748b; margin:10px 0; }
.at-missed-legend i { width:2px !important; height:13px !important; border-radius:0 !important; background:#e44949 !important; }
.at-edges { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 8px; min-height:28px; font-size:12px; color:#64748b; }
.at-edge { border:1px solid #fecaca; background:#fff7f7; color:#b91c1c; border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; }
.at-scroll { overflow:auto; max-height:720px; border:1px solid #e2e8f0; border-radius:12px; position:relative; scrollbar-gutter:stable; }
.at-chart { min-width:960px; }
.at-header,.at-row { display:grid; grid-template-columns:var(--at-person-width) minmax(600px,1fr) var(--at-total-width); }
.at-header { height:44px; position:sticky; top:0; z-index:5; background:#f8fafc; border-bottom:1px solid #e2e8f0; align-items:center; font-size:11px; color:#64748b; }
.at-header>span { padding:0 12px; }
.at-header>span:first-child { position:sticky; left:0; background:#f8fafc; z-index:6; height:100%; display:flex; align-items:center; }
.at-axis { position:relative; height:100%; }
.at-tick { position:absolute; top:14px; transform:translateX(-50%); font-variant-numeric:tabular-nums; }
.at-tick:after { content:''; position:absolute; top:24px; height:5px; width:1px; background:#cbd5e1; left:50%; }
.at-tick.is-first { transform:none; }.at-tick.is-last { transform:translateX(-100%); }
.at-body { position:relative; }
.at-row { height:70px; border-bottom:1px solid #edf1f5; align-items:center; }
.at-row:last-of-type { border:0; }
.at-person { position:sticky; left:0; background:#fff; z-index:3; height:100%; padding:12px; display:flex; flex-direction:column; justify-content:center; box-shadow:1px 0 #edf1f5; }
.at-person strong { font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.at-person small,.at-total small { color:#94a3b8; font-size:10px; margin-top:4px; }
.at-track { position:relative; height:18px; background:#f1f5f9; }
.at-segment { position:absolute; top:0; height:18px; min-height:0; min-width:0; padding:0; border:0; border-radius:0; background:var(--at-color); cursor:help; }
.at-segment:hover,.at-segment:focus-visible { filter:brightness(1.1); outline:2px solid #334155; outline-offset:2px; z-index:2; }
.at-segment.is-gap,.at-track.has-missing-history { background:repeating-linear-gradient(135deg,#e2e8f0 0 3px,#f8fafc 3px 7px); }
.at-no-data { position:absolute; top:0; inset-inline:0; text-align:center; color:#64748b; font-size:10px; line-height:18px; }
.at-total { text-align:right; padding:0 12px; display:flex; flex-direction:column; }
.at-total strong { font-size:11px; font-variant-numeric:tabular-nums; }
.at-markers { position:absolute; top:0; bottom:0; left:var(--at-person-width); right:var(--at-total-width); pointer-events:none; z-index:2; }
.at-marker { position:absolute; top:0; height:100%; width:12px; min-width:0; transform:translateX(-50%); border:0; padding:0; background:transparent; pointer-events:auto; cursor:pointer; }
.at-marker:before { content:''; position:absolute; inset-block:0; width:1px; left:50%; background:rgba(220,38,38,.6); }
.at-marker:hover:before,.at-marker:focus-visible:before,.at-marker.is-highlighted:before { width:2px; background:#dc2626; box-shadow:0 0 0 3px #ef444420; }
.at-marker:focus-visible { outline:1px solid #dc2626; }
.at-marker-count { position:absolute; left:50%; top:2px; transform:translateX(-50%); border-radius:4px; background:#dc2626; color:white; font-size:9px; padding:1px 3px; }
.at-popover { position:fixed; z-index:180; width:340px; max-width:calc(100vw - 24px); max-height:min(460px,70vh); overflow:auto; background:#fff; color:#334155; border:1px solid #e2e8f0; border-top:3px solid #dc2626; box-shadow:0 12px 40px #0f172a30; border-radius:12px; padding:14px; font-family:inherit; font-size:12px; line-height:1.5; }
.at-popover h4 { margin:0 28px 12px 0; font-size:13px; }
.at-popover-close { position:absolute; top:8px; right:8px; width:24px; height:24px; border:0; border-radius:5px; cursor:pointer; background:#f1f5f9; color:#475569; }
.at-popover-call { padding:10px 0; border-top:1px solid #edf1f5; }
.at-popover-call:first-of-type { border-top:0; }
.at-popover-call strong { font-variant-numeric:tabular-nums; font-size:12px; }
.at-popover-call small { display:block; color:#64748b; margin-top:4px; }
.at-phone { display:block; padding:0; margin:6px 0; border:0; background:none; color:#0369a1; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; }
.at-status-popover { border-top-color:#64748b; white-space:normal; font-size:12px; line-height:1.7; }
@media(max-width:700px) { .at-zone { margin-left:0; }.at-toolbar { gap:10px; }.at-edges { flex-wrap:wrap; }.at-timeline { --at-person-width:155px; } }