/* Rings, bars, the pulse line, tables, and loading, empty and error states. */

/* Rings, bars and the pulse line */
.ring { position: relative; width: 112px; height: 112px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--sunken); }
.ring .fill { stroke: var(--txm-green); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.ring .fill.blue { stroke: var(--txm-blue); }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; }
.ring-label b { display: block; font-size: 30px; font-weight: 300; }
.ring-label span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.bar { height: 10px; border-radius: 5px; background: var(--sunken); overflow: hidden; display: flex; }
.bar > span { display: block; height: 100%; background: var(--txm-blue); transition: width .8s var(--ease); }
.bar > span.green { background: var(--txm-green); }
.bar > span.dark { background: var(--txm-dark-gray); }
.pulse { width: 100%; height: 72px; display: block; overflow: visible; }
.pulse .base { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.pulse .line { fill: none; stroke: var(--txm-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.4s var(--ease) .2s forwards; }
.pulse .ahead { fill: none; stroke: var(--blue-50); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 6; }
.pulse .gap { fill: none; stroke: var(--attn); stroke-width: 3; stroke-linecap: round; }
.pulse .now { fill: var(--txm-blue); }
.pulse .now-ring { fill: none; stroke: var(--txm-blue); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: beat 1.8s ease-out infinite; }
.helix { position: absolute; pointer-events: none; fill: none; stroke: var(--txm-blue); stroke-linecap: round; }

/* Tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: #FAFBFC; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--blue-8); }
.tbl .num { text-align: right; }
.tbl tr[aria-selected="true"] td { background: var(--blue-15); }

/* Loading, empty and error states */
.skel { border-radius: 10px; background: linear-gradient(90deg, #E7ECF1 0, #F3F5F8 40%, #E7ECF1 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 20px; }
.state { min-height: 520px; display: grid; place-items: center; }
.state-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); padding: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.loader { width: 120px; height: 36px; }
.loader path { fill: none; stroke: var(--txm-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw-loop 1.6s ease-in-out infinite; }
.errbar { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: var(--crit-ink); color: #fff; font-weight: 600; }