.request-timing-overview {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
.request-timing-overview>div {min-width:0;padding:14px 12px;background:#f8fafc;border-radius:10px}
.request-timing-overview span {display:block;color:#526174;font-size:11px;line-height:1.5}
.request-timing-overview strong {display:block;margin-top:5px;color:#172033;font-size:18px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.request-timing-note,.request-timing-empty,.request-timing-notice {font-size:12px;line-height:1.7;color:#526174;margin:10px 0 14px}
.request-timing-empty {padding:12px;background:#f8fafc;border-radius:8px}
.request-timing-notice {padding:10px 12px;color:#92400e;background:#fffbeb;border-radius:8px}
.request-timing-attempts {display:grid;gap:12px}
.request-timing-attempt {min-width:0;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff}
.request-timing-attempt>summary,.request-timing-http>summary {display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:#172033;transition:background-color .15s ease}
.request-timing-attempt>summary {padding:14px;font-size:13px;background:#f8fafc}
.request-timing-attempt>summary::-webkit-details-marker,.request-timing-http>summary::-webkit-details-marker {display:none}
.request-timing-attempt>summary::before,.request-timing-http>summary::before {content:"";width:7px;height:7px;flex:0 0 7px;border-right:1.5px solid #64748b;border-bottom:1.5px solid #64748b;transform:rotate(-45deg);transition:transform .15s ease}
.request-timing-attempt[open]>summary::before,.request-timing-http[open]>summary::before {transform:rotate(45deg)}
.request-timing-attempt>summary>span,.request-timing-http>summary>span {flex:1;min-width:0}
.request-timing-attempt>summary strong {font-size:12px}
.request-timing-attempt>summary small {display:block;margin-top:4px;font-size:12px;font-weight:400;line-height:1.5;color:#526174;overflow-wrap:anywhere}
.request-timing-attempt>summary>b,.request-timing-http>summary>strong {font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.request-timing-attempt>summary:hover,.request-timing-http>summary:hover {background:#f1f5f9}
.request-timing-attempt summary:focus-visible {outline:2px solid #3b82f6;outline-offset:-3px;border-radius:6px}
.request-timing-attempt-content {padding:0 14px 12px}
.request-timing-http {margin-top:10px;min-width:0}
.request-timing-http>summary {padding:10px 0;font-size:12px;border-radius:6px}
.request-timing-tags {display:flex;flex-wrap:wrap;gap:5px;margin:0 0 14px}
.request-timing-tags>span {padding:3px 7px;background:#f1f5f9;border-radius:5px;font-size:10px;line-height:1.4;color:#475569}
.request-timing-tags>.request-timing-partial {background:#fffbeb;color:#92400e}
.request-timing-phases {display:grid;gap:12px;margin:0}
.request-timing-phase {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px;align-items:center;--timing-color:#2563eb}
.request-timing-phase dt {color:#334155;font-size:12px;line-height:1.5}
.request-timing-phase dd {margin:0;display:flex;align-items:center;gap:10px;min-width:0}
.request-timing-rail {display:block;flex:1;min-width:20px;height:7px;background:#edf1f5;border-radius:99px;overflow:hidden}
.request-timing-rail i {display:block;height:100%;background:var(--timing-color);border-radius:inherit}
.request-timing-write {--timing-color:#0d9488}
.request-timing-wait {--timing-color:#d97706}
.request-timing-read {--timing-color:#7c3aed}
.request-timing-value {min-width:66px;text-align:right;color:#172033;font-size:12px;font-weight:550;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.request-timing-value.is-missing {color:#64748b;font-size:11px;font-weight:400}
.request-timing-connection-details {margin-top:14px;padding:10px 12px;border-radius:8px;background:#f8fafc;color:#475569;font-size:11px}
.request-timing-connection-details>summary {cursor:pointer;font-weight:600;line-height:1.5}
.request-timing-connection-details p {margin:8px 0;line-height:1.7}
.request-timing-connection-details dl {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0}
.request-timing-connection-details dt {line-height:1.5}
.request-timing-connection-details dd {margin:4px 0 0;color:#172033;font-variant-numeric:tabular-nums}
.request-timing-first-byte {display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid #e2e8f0;color:#526174;font-size:11px;line-height:1.6}
.request-timing-first-byte strong {color:#172033;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:520px) {
  .request-timing-overview {gap:6px}
  .request-timing-overview>div {padding:10px 8px}
  .request-timing-overview span {font-size:10px}
  .request-timing-overview strong {font-size:15px}
  .request-timing-attempt>summary {padding:12px 10px;gap:9px}
  .request-timing-attempt-content {padding:0 10px 10px}
  .request-timing-phase {grid-template-columns:minmax(0,1fr);gap:4px}
  .request-timing-phase dt {font-size:11px}
  .request-timing-value {min-width:76px}
  .request-timing-rail {height:6px}
}
@media(prefers-reduced-motion:reduce) {
  .request-timing-attempt>summary,.request-timing-http>summary,.request-timing-attempt>summary::before,.request-timing-http>summary::before {transition:none}
}
