.request-trace{--rt-pad: 18px;position:relative;margin:1.5rem 0;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-gray-5);border-radius:14px;padding:var(--rt-pad) 20px 20px}.request-trace .rt-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;min-height:24px}.request-trace .rt-title{font:600 14px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);letter-spacing:-.005em}.request-trace .rt-header:not(:has(.rt-title)){justify-content:flex-end}.request-trace .rt-reset{display:inline-flex;align-items:center;gap:5px;font:500 11.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 9px 4px 7px;cursor:pointer;transition:color .14s,background-color .14s,border-color .14s}.request-trace .rt-reset svg{width:14px;height:14px}.request-trace .rt-reset:hover{color:var(--sl-color-text);background:var(--sl-color-bg);border-color:var(--sl-color-hairline)}.request-trace .rt-reset:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.request-trace .rt-lanes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:8px 10px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:10px}.request-trace .rt-lane{display:inline-flex;align-items:center;gap:6px;font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-4);padding:4px 10px;border-radius:999px;border:1px solid transparent;transition:color .18s,background-color .18s,border-color .18s}.request-trace .rt-lane.is-active{color:#fff;background:var(--sl-color-accent);border-color:var(--sl-color-accent)}.request-trace .rt-lane-sep{color:var(--sl-color-gray-5);display:inline-flex}.request-trace .rt-url{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-2);padding:3px 9px;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);border-radius:6px}.request-trace .rt-url-method{font-weight:700;color:var(--sl-color-accent);font-size:10.5px;letter-spacing:.04em}.request-trace .rt-stage{display:flex;flex-direction:column;gap:8px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:10px;padding:12px 14px;min-height:80px}.request-trace .rt-stage:empty:before{content:"No nodes declared.";font:500 12.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-4);font-style:italic}.request-trace .rt-node{position:relative;display:block;background:transparent;border:1px solid var(--sl-color-hairline-light, var(--sl-color-hairline));border-radius:8px;padding:9px 12px;min-height:38px;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease}.request-trace .rt-node.is-hidden-fallback{opacity:.32}.request-trace .rt-node.is-dimmed{opacity:.7}.request-trace .rt-node-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:22px}.request-trace .rt-node[data-rt-reserve-chip]>.rt-node-row{min-height:46px}.request-trace .rt-node-label{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-text);letter-spacing:-.005em;min-width:0;overflow-wrap:anywhere}.request-trace .rt-tag{display:inline-flex;align-items:center;font:700 9.5px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:4px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 8%,transparent);flex:0 0 auto}.request-trace .rt-tag[data-rt-kind=server]{color:var(--sl-color-blue, var(--sl-color-accent))}.request-trace .rt-tag[data-rt-kind=client]{color:var(--sl-color-purple, var(--sl-color-accent-high))}.request-trace .rt-tag[data-rt-kind=suspense]{color:var(--sl-color-orange, var(--sl-color-accent))}.request-trace .rt-state{display:inline-flex;align-items:center;gap:5px;font:600 11px ui-sans-serif,system-ui,sans-serif;padding:2px 8px 2px 7px;border-radius:999px;border:1px solid var(--sl-color-hairline);background:var(--sl-color-bg-sidebar);color:var(--sl-color-gray-3);margin-left:auto;flex:0 0 auto;transition:color .2s,background-color .2s,border-color .2s}.request-trace .rt-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:0 0 auto}.request-trace .rt-state-detail{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);flex:0 0 auto}.request-trace .rt-state[data-state=idle]{color:var(--sl-color-gray-3);background:var(--sl-color-bg-sidebar);border-color:var(--sl-color-hairline)}.request-trace .rt-state[data-state=rendering]{color:#fff;background:var(--sl-color-accent);border-color:var(--sl-color-accent)}.request-trace .rt-state[data-state=awaiting]{color:var(--sl-color-orange, var(--sl-color-accent));background:color-mix(in srgb,var(--sl-color-orange, var(--sl-color-accent)) 14%,transparent);border-color:color-mix(in srgb,var(--sl-color-orange, var(--sl-color-accent)) 55%,transparent)}.request-trace .rt-state[data-state=prerendered]{color:var(--sl-color-purple, var(--sl-color-accent-high));background:color-mix(in srgb,var(--sl-color-purple, var(--sl-color-accent-high)) 12%,transparent);border-color:color-mix(in srgb,var(--sl-color-purple, var(--sl-color-accent-high)) 55%,transparent)}.request-trace .rt-state[data-state=cached]{color:var(--sl-color-green, var(--sl-color-accent));background:color-mix(in srgb,var(--sl-color-green, var(--sl-color-accent)) 14%,transparent);border-color:color-mix(in srgb,var(--sl-color-green, var(--sl-color-accent)) 55%,transparent)}.request-trace .rt-state[data-state=shell]{color:var(--sl-color-text);background:color-mix(in srgb,var(--sl-color-accent) 16%,transparent);border-color:color-mix(in srgb,var(--sl-color-accent) 55%,transparent)}.request-trace .rt-state[data-state=fallback]{color:var(--sl-color-orange, var(--sl-color-accent));background:color-mix(in srgb,var(--sl-color-orange, var(--sl-color-accent)) 16%,transparent);border-color:color-mix(in srgb,var(--sl-color-orange, var(--sl-color-accent)) 55%,transparent);border-style:dashed}.request-trace .rt-state[data-state=streamed]{color:#fff;background:var(--sl-color-green, var(--sl-color-accent));border-color:var(--sl-color-green, var(--sl-color-accent))}.request-trace .rt-state[data-state=hydrated]{color:#fff;background:var(--sl-color-purple, var(--sl-color-accent-high));border-color:var(--sl-color-purple, var(--sl-color-accent-high))}.request-trace .rt-state[data-state=painted]{color:var(--sl-color-gray-2);background:var(--sl-color-bg-sidebar);border-color:var(--sl-color-gray-5)}.request-trace .rt-state[data-state=pending]{color:var(--sl-color-gray-3);background:var(--sl-color-bg-sidebar);border-color:var(--sl-color-hairline);border-style:dashed}.request-trace .rt-state[data-state=needs-suspense]{color:var(--sl-color-red, var(--sl-color-accent));background:color-mix(in srgb,var(--sl-color-red, var(--sl-color-accent)) 14%,transparent);border-color:var(--sl-color-red, var(--sl-color-accent));border-style:dashed}.request-trace .rt-chip{display:inline-flex;align-items:center;font:700 9.5px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:4px;color:var(--sl-color-green, var(--sl-color-accent));border:1px dashed color-mix(in srgb,var(--sl-color-green, var(--sl-color-accent)) 55%,transparent);background:color-mix(in srgb,var(--sl-color-green, var(--sl-color-accent)) 10%,transparent);flex:0 0 auto}.request-trace .rt-cache{display:inline-flex;align-items:center;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);padding:1px 6px;border-radius:4px;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);flex:0 0 auto}.request-trace .rt-children{display:flex;flex-direction:column;gap:6px;margin:8px 0 0 6px;padding-left:14px;border-left:2px solid var(--sl-color-hairline)}.request-trace .rt-children:empty{display:none}.request-trace .rt-wire-panel{margin-top:14px;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:10px;padding:12px 14px}.request-trace .rt-wire-panel[hidden]{display:none}.request-trace .rt-wire-title{font:600 12px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);letter-spacing:-.005em;margin-bottom:8px}.request-trace .rt-wire-rows{display:flex;flex-direction:column;gap:8px}.request-trace .rt-wire-boundary{border:1px solid var(--sl-color-hairline);border-radius:8px;padding:8px 10px;background:var(--sl-color-bg-sidebar)}.request-trace .rt-wire-boundary-head{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-2);margin-bottom:6px}.request-trace .rt-wire-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:baseline;padding:5px 0}.request-trace .rt-wire-row+.rt-wire-row{border-top:1px dashed var(--sl-color-hairline)}.request-trace .rt-wire-name{font:600 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-text)}.request-trace .rt-wire-value{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--sl-color-gray-3);overflow-wrap:anywhere}.request-trace .rt-wire-status{display:inline-flex;align-items:center;gap:5px;font:700 10.5px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px}.request-trace .rt-wire-status[data-status=ok]{color:#fff;background:var(--sl-color-green, var(--sl-color-accent))}.request-trace .rt-wire-status[data-status=rejected]{color:#fff;background:var(--sl-color-red, var(--sl-color-accent))}.request-trace .rt-wire-status[data-status=leak]{color:var(--sl-color-orange, var(--sl-color-accent));background:color-mix(in srgb,var(--sl-color-orange, var(--sl-color-accent)) 18%,transparent);border:1px solid var(--sl-color-orange, var(--sl-color-accent))}.request-trace .rt-wire-note{grid-column:1 / -1;font:400 11.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);line-height:1.45}.request-trace .rt-scrubber{--rt-thumb-size: 18px;display:flex;align-items:center;gap:12px;margin-top:14px;padding-bottom:36px}.request-trace .rt-btn{flex:0 0 auto;height:34px;display:inline-flex;align-items:center;gap:6px;background:var(--sl-color-accent);border:1px solid var(--sl-color-accent);border-radius:8px;color:#fff;cursor:pointer;padding:0 12px;font-size:13px;font-weight:600;letter-spacing:.02em;box-shadow:0 1px 2px color-mix(in srgb,var(--sl-color-accent) 30%,transparent);transition:filter .14s,box-shadow .14s,transform .06s,background-color .14s,border-color .14s,color .14s}.request-trace .rt-btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 2px 6px color-mix(in srgb,var(--sl-color-accent) 40%,transparent)}.request-trace .rt-btn:focus-visible{outline:2px solid var(--sl-color-accent);outline-offset:2px}.request-trace .rt-btn:active:not(:disabled){transform:translateY(1px)}.request-trace .rt-btn:disabled{background:var(--sl-color-bg);border-color:var(--sl-color-hairline);color:var(--sl-color-text);box-shadow:none;opacity:.4;cursor:not-allowed}.request-trace .rt-btn-label{line-height:1}.request-trace .rt-slider-wrap{flex:1;position:relative;min-width:0;height:var(--rt-thumb-size)}.request-trace .rt-slider{appearance:none;-webkit-appearance:none;width:100%;height:var(--rt-thumb-size);background:transparent;outline:none;margin:0;display:block;cursor:pointer}.request-trace .rt-slider:disabled{cursor:not-allowed;opacity:.5}.request-trace .rt-slider::-webkit-slider-runnable-track{height:4px;background:var(--sl-color-gray-5);border-radius:2px}.request-trace .rt-slider::-moz-range-track{height:4px;background:var(--sl-color-gray-5);border-radius:2px}.request-trace .rt-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--rt-thumb-size);height:var(--rt-thumb-size);background:var(--sl-color-accent);border:2px solid var(--sl-color-bg);border-radius:50%;margin-top:calc((4px - var(--rt-thumb-size)) / 2);box-shadow:0 1px 2px #00000026}.request-trace .rt-slider::-moz-range-thumb{width:var(--rt-thumb-size);height:var(--rt-thumb-size);background:var(--sl-color-accent);border:2px solid var(--sl-color-bg);border-radius:50%;box-shadow:0 1px 2px #00000026}.request-trace .rt-slider:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sl-color-accent);outline-offset:2px}.request-trace .rt-slider:focus-visible::-moz-range-thumb{outline:2px solid var(--sl-color-accent);outline-offset:2px}.request-trace .rt-ticks{position:absolute;left:calc(var(--rt-thumb-size) / 2);right:calc(var(--rt-thumb-size) / 2);top:calc(100% + 12px);height:6px;pointer-events:none}.request-trace .rt-tick{position:absolute;top:0;width:1.5px;height:6px;background:var(--sl-color-gray-4);border-radius:1px;transform:translate(-50%);transition:height .14s,background-color .14s}.request-trace .rt-tick.is-active{height:10px;background:var(--sl-color-accent)}.request-trace .rt-tick-labels{position:absolute;left:calc(var(--rt-thumb-size) / 2);right:calc(var(--rt-thumb-size) / 2);top:calc(100% + 22px);height:12px;pointer-events:none}.request-trace .rt-tick-label{position:absolute;top:0;transform:translate(-50%);font:500 10.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-gray-3);white-space:nowrap;transition:color .14s,font-weight .14s}.request-trace .rt-tick-label.is-active{color:var(--sl-color-accent);font-weight:700}.request-trace .rt-caption{margin-top:14px;padding:10px 12px;font:400 13.5px ui-sans-serif,system-ui,sans-serif;color:var(--sl-color-text);line-height:1.55;background:var(--sl-color-bg);border:1px solid var(--sl-color-hairline);border-radius:8px;min-height:calc(4.65em + 20px)}.request-trace .rt-caption :global(p){margin:0 0 6px}.request-trace .rt-caption :global(p:last-child){margin-bottom:0}.request-trace .rt-caption :global(code){font-size:.92em;padding:1px 4px;background:var(--sl-color-bg-sidebar);border:1px solid var(--sl-color-hairline);border-radius:4px}.request-trace .rt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.request-trace .rt-node,.request-trace .rt-state,.request-trace .rt-lane,.request-trace .rt-tick,.request-trace .rt-tick-label,.request-trace .rt-btn{transition:none!important;transform:none!important}}
