/* The run page's live endpoint table and failure taxonomy (endpoint-live.js, failures-panel.js). */
.live-tables { display: grid; gap: 16px; margin-bottom: 16px; min-width: 0; }
.live-stale { margin: 0; }
.ept-head { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.ept-titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ept-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ept-filter { width: 200px; }
.ept-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.ept-tools .seg { display: inline-flex; padding: 2px; border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--inset); }
.ept-tools .seg-btn { min-height: 28px; padding: 3px 10px; border: 0; border-radius: 6px; background: none; color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ept-tools .seg-btn:hover:not(:disabled) { color: var(--text); }
.ept-tools .seg-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.ept-tools .seg-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.ept-tools .seg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.ept-note:empty { display: none; }
.ept-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-dim); }
.panel-ept[data-held="true"] .ept-note { color: var(--accent); }
.ept-hint { margin: 10px 0 0; overflow-wrap: anywhere; }
.ept-empty { margin: 10px 0 4px; }
.pin-chip { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; min-height: 28px; padding: 3px 8px 3px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.pin-chip .icon { width: 14px; height: 14px; flex: none; }
.pin-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The table scrolls inside its own box (both axes); the header and the Aggregated row stay put. */
.panel-ept .ept-scroll, .panel-flt .flt-scroll { margin: 10px -18px -12px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: none; }
.ept-scroll { max-height: min(70vh, 720px); overflow: auto; contain: content; overscroll-behavior: contain; }
.ept { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
.ept th, .ept td { padding: 7px 10px; }
.ept thead th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.ept tfoot td, .ept tfoot th { position: sticky; bottom: 0; z-index: 1; background: var(--panel-2); border-top: 1px solid var(--border); border-bottom: 0; font-weight: 700; }
.ept tbody tr:hover { background: var(--panel-2); }
.ept td, .ept tbody th, .ept tfoot th { cursor: help; }
.ept tbody th { border-bottom-color: var(--border-soft); font-weight: 500; text-align: left; background: none; letter-spacing: normal; font-size: inherit; color: var(--text); }
.ept .col-method { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.ept .ep-name { width: 26ch; min-width: 16ch; overflow-wrap: anywhere; }
.ept tfoot .ep-name { white-space: nowrap; }
.ept .is-bad { color: var(--bad); font-weight: 600; }
/* Method and Name stay pinned on the left when the table scrolls sideways (phones). The method
   column has a fixed width so Name can sit exactly beside it; pinned cells need an opaque fill. */
.ept .col-method { width: 5.5rem; min-width: 5.5rem; max-width: 5.5rem; box-sizing: border-box; }
.ept .col-method, .ept .col-name { position: sticky; left: 0; z-index: 1; background: var(--panel); }
.ept .col-name { left: 5.5rem; box-shadow: inset -1px 0 0 var(--border-soft); }
.ept tbody tr:hover .col-method, .ept tbody tr:hover .col-name, .ept thead .col-method, .ept thead .col-name, .ept tfoot .col-method, .ept tfoot .col-name { background: var(--panel-2); }
.ept thead .col-method, .ept thead .col-name { z-index: 4; }
.ept tfoot .col-method, .ept tfoot .col-name { z-index: 3; }
.ept td:focus-visible, .ept th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ept .col-requests, .ept .col-p50 { border-left: 1px solid var(--border-soft); }
.ept .col-avgBytes { border-left: 1px solid var(--border-soft); }

.flt-summary { margin: 8px 0 0; color: var(--text-dim); }
.flt-summary .icon { vertical-align: -3px; }
.flt-summary strong { color: var(--text); }
.panel-flt[data-state="zero"] .flt-summary .icon { color: var(--good); }
.panel-flt[data-state="zero"] .flt-summary strong { color: var(--good); }
.flt { font-size: 13px; font-variant-numeric: tabular-nums; }
.flt td { vertical-align: top; }
.flt-scroll { max-height: min(60vh, 560px); overflow: auto; overscroll-behavior: contain; }
.flt-class { min-width: 16ch; }
.flt-codes { max-width: 52ch; }
.flt thead th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.flt-label { font-weight: 600; }
.flt-codes { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.flt-endpoint { min-width: 14ch; }
.flt-pick { display: inline; padding: 2px 4px; margin: -2px -4px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--text-faint); text-underline-offset: 3px; }
.flt-pick:hover { border-color: var(--border); }
.flt-pick.is-on { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.flt-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.flt-method { color: var(--text-dim); font-size: 12px; }
.flt .cell-value:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.flt tr.is-picked { background: var(--accent-soft); }

.chip { display: inline-block; min-width: 3.4em; padding: 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-align: center; border: 1px solid currentColor; }
.chip-http-5xx, .chip-network, .chip-reset { color: var(--bad); background: var(--bad-soft); }
.chip-http-4xx, .chip-timeout, .chip-http-other { color: var(--warn); background: var(--warn-soft); }
.chip-check { color: var(--accent); background: var(--accent-soft); }

/* By tag (tag-panel.js): same dense table language as the endpoint table, scrolling in its own box. */
.panel-tag .tag-scroll { margin: 10px -18px -12px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: none; max-height: min(50vh, 480px); overflow: auto; overscroll-behavior: contain; }
.tag-select { width: auto; min-width: 14ch; max-width: 100%; }
.tag-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tag-table { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
.tag-table th, .tag-table td { padding: 7px 10px; }
.tag-table thead th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.tag-table tbody th, .tag-table tfoot th { text-align: left; font-weight: 500; font-size: inherit; letter-spacing: normal; color: var(--text); background: none; overflow-wrap: anywhere; }
.tag-table tfoot td, .tag-table tfoot th { position: sticky; bottom: 0; z-index: 1; background: var(--panel-2); border-top: 1px solid var(--border); border-bottom: 0; font-weight: 700; }
.tag-table tbody tr:hover { background: var(--panel-2); }
.tag-table .tag-value { min-width: 12ch; max-width: 36ch; font-family: var(--mono); font-size: 12.5px; }
.tag-table .tag-value.is-other { font-style: italic; color: var(--text-dim); }
.tag-table .is-bad { color: var(--bad); font-weight: 600; }
.tag-table .cell-value:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

@media (max-width: 760px) {
  .ept-tools { width: 100%; }
  .ept-filter { flex: 1 1 140px; width: auto; }
  .ept-tools .seg { flex-wrap: wrap; }
  .ept-scroll { max-height: 60vh; }
  .ept .ep-name { width: 20ch; }
}
@media (prefers-reduced-motion: reduce) {
  .ept-tools .seg-btn, .pin-chip { transition: none; }
}