/* Readable telemetry: full-width sequence and details opened below the selected event. */
.execution-host { min-width:0; container-type:inline-size; height:auto!important; }
.execution-timeline {
  --et-blue:#315e91; --et-purple:#7055aa; --et-amber:#93500d;
  --et-surface:color-mix(in srgb,var(--bg-card) 94%,var(--text-muted));
  --et-label:16px; --et-small:13px; --et-code:14px;
  display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:10px;
  background:var(--bg-card); color:var(--text-primary); overflow:clip; font-size:14px;
}
[data-theme=dark] .execution-timeline { --et-blue:#a0c9f1; --et-purple:#c9b2f4; --et-amber:#efbd83; }
.execution-timeline.et-large-text { --et-label:18px; --et-small:15px; --et-code:16px; }
.et-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 16px; background:var(--et-surface); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.et-heading { min-width:0; }
.et-freshness { margin:5px 0 0 17px; font-size:var(--et-small); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.et-activity { width:360px; max-width:100%; flex:0 1 360px; }
.et-pulse-row { display:grid; grid-template-columns:74px minmax(0,1fr) 30px; align-items:center; gap:10px; min-height:18px; font-size:13px; line-height:18px; }
.et-pulse-row>span { color:var(--text-muted); }.et-pulse-row>b { text-align:right; font:600 13px/18px var(--font-mono); }
.et-pulse-row svg { display:block; width:100%; height:10px; overflow:visible; }
.et-pulse-track { fill:none; stroke:var(--border); stroke-width:1; }.et-pulse-bars { fill:currentColor; }
.et-pulse-calls { color:var(--et-purple); }.et-pulse-commands { color:var(--et-blue); }.et-pulse-errors { color:var(--et-amber); }
.et-pulse-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; line-height:16px; color:var(--text-muted); margin-top:3px; }
.et-status { display:flex; align-items:center; flex-wrap:wrap; gap:9px; min-width:0; }
.et-status strong { font-size:var(--et-label); }.et-status>span:last-child { color:var(--text-muted); font-size:var(--et-small); }
.et-signal { flex:0 0 8px; height:8px; border-radius:50%; background:var(--et-blue); }
.et-signal.is-live { animation:et-beacon 2.4s ease-out infinite; }
.et-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.execution-timeline button { font:inherit; cursor:pointer; color:var(--text-primary); }
.execution-timeline button:focus-visible,.et-position:focus-visible { outline:2px solid var(--et-blue); outline-offset:3px; }
.execution-timeline button:disabled { opacity:.45; cursor:default; }
.et-tools button,.et-pages button,.et-detail-head button { padding:8px 12px; min-height:38px; border:1px solid var(--border); border-radius:6px; background:var(--bg-card); font-size:var(--et-small); }
.et-tools button:hover,.et-pages button:not(:disabled):hover,.et-detail-head button:not(:disabled):hover { border-color:var(--et-blue); }
.et-tools [aria-pressed=true],.et-tools [aria-expanded=true] { color:var(--et-blue); border-color:color-mix(in srgb,var(--et-blue) 45%,var(--border)); background:color-mix(in srgb,var(--et-blue) 7%,var(--bg-card)); }
.et-body { display:flex; flex-direction:column; min-width:0; }
.et-chart { min-width:0; }
.et-summary { display:flex; align-items:center; gap:16px; padding:6px 16px; color:var(--text-muted); flex-wrap:wrap; font-size:var(--et-small); }
.execution-timeline .et-latest-focus { margin-right:auto; background:transparent; border:0; padding:4px 0; min-height:30px; font-size:14px; text-align:left; }
.et-latest-focus span { color:var(--et-blue); font:600 11px var(--font-mono); letter-spacing:.07em; margin-right:8px; }
.et-summary b { color:var(--et-blue); margin-left:8px; font-size:18px; }
.execution-timeline .et-errors { background:none; border:0; padding:2px; color:var(--et-amber); font-size:var(--et-small); text-decoration:underline; text-underline-offset:4px; }
.et-alert,.et-error { color:var(--et-amber); }.et-verified { color:var(--et-blue); }
.et-sequence { display:grid; grid-template-rows:repeat(3,minmax(90px,auto)); position:relative; isolation:isolate; }
.et-connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.et-link { fill:none; stroke:var(--et-blue); stroke-width:1.3; opacity:.24; }
.et-link-flash { fill:none; stroke:var(--et-blue); stroke-width:2.5; stroke-dasharray:1; opacity:0; }
.et-lane { display:grid; grid-template-columns:140px minmax(0,1fr); min-width:0; border-top:1px solid var(--border); --et-ink:var(--et-blue); }
.et-lane-0 { --et-ink:var(--et-purple); }.et-lane-1 { --et-ink:var(--et-blue); }.et-lane-2 { --et-ink:var(--text-muted); }
.et-lane-name { display:flex; justify-content:center; flex-direction:column; position:relative; padding:12px 12px 12px 36px; font-size:14px; font-weight:600; background:var(--et-surface); border-right:1px solid var(--border); }
.et-lane-name>i { position:absolute; left:13px; top:calc(50% - 15px); color:var(--et-ink); font-style:normal; font-size:18px; }
.et-lane-name small { font-size:12px; font-weight:400; color:var(--text-muted); margin-top:5px; }
.et-rail { display:grid; grid-template-columns:repeat(var(--et-columns),minmax(0,1fr)); padding:0 6px; align-items:stretch; background:linear-gradient(var(--border),var(--border)) 0 45px/100% 1px no-repeat; }
.et-slot { border-right:1px dashed color-mix(in srgb,var(--border) 80%,transparent); }
.et-event { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr); grid-template-rows:22px 20px; align-content:center; align-items:center; gap:2px 8px; background:transparent; border:0; border-radius:0; padding:12px; min-width:0; transition:background .16s ease; }
.et-event:hover { background:color-mix(in srgb,var(--et-ink) 8%,transparent); }
.et-event[aria-pressed=true] { background:color-mix(in srgb,var(--et-ink) 11%,transparent); box-shadow:inset 0 -3px var(--et-ink); }
.et-marker { position:relative; display:flex; align-items:center; justify-content:center; grid-column:1; grid-row:1/3; width:38px; height:38px; border:2px solid var(--et-ink); border-radius:50%; background:var(--bg-card); color:var(--et-ink); font:600 16px var(--font-mono); z-index:1; }
.et-event[aria-pressed=true] .et-marker { box-shadow:0 0 0 5px color-mix(in srgb,var(--et-ink) 14%,transparent); }
.et-event-number { position:absolute; left:12px; top:5px; font:12px var(--font-mono); color:var(--text-muted); }
.et-latest .et-event-number { color:var(--et-ink); font-weight:600; }
.et-latest .et-marker { border-width:3px; }
.et-event strong { grid-column:2; grid-row:1; text-align:left; font-size:var(--et-label); font-weight:600; line-height:1.3; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.et-event small { grid-column:2; grid-row:2; text-align:left; font:var(--et-small)/1.5 var(--font-mono); color:var(--text-muted); }
.et-event.et-error,.et-event.et-incomplete { --et-ink:var(--et-amber); }.et-event.et-verified { --et-ink:var(--et-blue); }
.et-running .et-marker::after { content:''; position:absolute; inset:-6px; border:1px solid var(--et-blue); border-radius:50%; animation:et-beacon 2s ease-out infinite; }
.et-arrival .et-marker { animation:et-arrive .5s ease-out; }
.et-navigation { display:grid; grid-template-columns:auto minmax(180px,1fr); grid-template-areas:'pages overview' 'pages position' 'notes notes'; column-gap:24px; padding:12px 16px; border-top:1px solid var(--border); }
.et-pages { grid-area:pages; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.et-page-count { text-align:center; font-size:var(--et-small); color:var(--text-muted); }.et-page-count strong { color:var(--text-primary); }
.et-overview { grid-area:overview; display:flex; height:10px; gap:3px; align-self:end; }
.et-overview i { flex:1; min-width:0; background:var(--border); border-radius:2px; }
.et-overview .et-in-window { background:var(--et-blue); }.et-overview .et-error { background:var(--et-amber); }.et-overview .et-verified { background:var(--et-purple); }
.et-position { grid-area:position; display:block; width:100%; min-height:28px!important; height:28px; padding:0!important; margin:0; accent-color:var(--et-blue); cursor:ew-resize; background:transparent; border:0; }
.et-position:disabled { display:none; }
.et-window-label { grid-area:notes; display:flex; gap:12px; justify-content:space-between; font-size:12px; line-height:1.5; color:var(--text-muted); margin-top:8px; }
.et-inspector { min-width:0; border-top:1px solid var(--border); background:var(--et-surface); }
.et-detail-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px 12px; }
.et-detail-identity { display:flex; align-items:center; gap:13px; min-width:0; }.et-detail-identity>div { min-width:0; }
.et-detail-icon { display:grid; place-items:center; flex:0 0 42px; height:42px; color:var(--et-blue); background:color-mix(in srgb,var(--et-blue) 9%,var(--bg-card)); border:1px solid color-mix(in srgb,var(--et-blue) 28%,var(--border)); border-radius:9px; font:600 22px var(--font-mono); }
.et-detail-lane-0 { color:var(--et-purple); border-color:color-mix(in srgb,var(--et-purple) 35%,var(--border)); background:color-mix(in srgb,var(--et-purple) 8%,var(--bg-card)); }
.et-detail-kicker { display:block; color:var(--text-muted); letter-spacing:.06em; font:600 12px/1.4 var(--font-mono); }
.et-detail-nav { display:flex; flex:none; gap:8px; }.et-detail-head .et-close-detail { min-width:38px; }
.et-inspector-body { padding:14px 20px 20px; min-width:0; }
.et-detail-meta,.et-detail-content { min-width:0; }
.et-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:0 20px 14px; border-bottom:1px solid var(--border); }
.et-error-note { font-size:14px; line-height:1.6; margin-bottom:12px; }
.et-inspector h4 { font-size:20px; line-height:1.35; overflow-wrap:anywhere; margin:4px 0 0; }
.et-state { display:inline-flex; align-items:center; gap:7px; font-size:var(--et-small); padding:5px 9px; background:var(--bg-card); border:1px solid var(--border); border-radius:5px; }
.et-state:before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.et-inspector dl { margin:0; display:flex; flex:1; flex-wrap:wrap; gap:12px 24px; min-width:0; font-size:var(--et-small); }
.et-inspector dl>div { display:flex; align-items:baseline; gap:8px; }.et-inspector dt { color:var(--text-muted); }.et-inspector dd { margin:0; font-weight:600; overflow-wrap:anywhere; }.et-detail-model { min-width:0; }.et-detail-model dd { flex:1; }
.et-detail-content { border:1px solid var(--border); border-radius:8px; overflow:hidden; --et-reader-size:15px; --et-reader-leading:24px; }
.et-code-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; padding:12px 14px; background:var(--bg-card); }
.et-code-toolbar>div:first-child { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; }.et-code-toolbar strong { font-size:14px; font-weight:600; }.et-code-toolbar>div>span { color:var(--text-muted); font-size:12px; }
.et-reader-actions { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.et-reader-actions button,.et-reader-footer .et-open { background:var(--bg-card); border:1px solid var(--border); border-radius:5px; padding:7px 10px; min-height:34px; font-size:13px; }
.et-reader-actions [aria-pressed=true] { color:var(--et-blue); background:color-mix(in srgb,var(--et-blue) 8%,var(--bg-card)); border-color:color-mix(in srgb,var(--et-blue) 38%,var(--border)); }
.et-reader-actions button:hover,.et-reader-footer .et-open:hover { border-color:var(--et-blue); }
.et-copy[aria-busy=true] { opacity:.6; cursor:progress; }
.et-inspector pre.et-code { font:var(--et-reader-size)/var(--et-reader-leading) var(--font-mono); white-space:normal; overflow:auto; overscroll-behavior:contain; padding:12px 0; background:#101923; color:#e0e9f5; border:0; border-radius:0; max-height:300px; min-height:72px; margin:0; scrollbar-color:#52677e #101923; tab-size:4; }
.et-code>code { display:block; font:inherit; color:inherit; background:none; padding:0; }
.et-code-line { display:grid; grid-template-columns:52px minmax(0,1fr); min-height:var(--et-reader-leading); }
.et-code-number { user-select:none; color:#90a4bb; border-right:1px solid #304155; padding:0 12px; text-align:right; font-size:12px; }
.et-code-text { white-space:pre-wrap; overflow-wrap:anywhere; padding:0 16px; }
.et-code-line:hover { background:#1d2c3e; }
.et-code-nowrap .et-code-line { grid-template-columns:52px max-content; min-width:100%; width:max-content; }.et-code-nowrap .et-code-text { white-space:pre; overflow-wrap:normal; }
.et-code-expanded pre.et-code { max-height:min(65vh,620px); }
.et-code-large { --et-reader-size:17px; --et-reader-leading:28px; }
.et-reader-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; padding:12px 14px; background:var(--bg-card); border-top:1px solid var(--border); }
.et-reader-footer>div { flex:1; min-width:180px; }.et-reader-footer .et-open { flex:none; color:var(--et-blue); }
.et-preview-hint { font-size:12px; line-height:1.6; color:var(--text-muted); margin:0; }
.et-copy-status { display:block; color:var(--et-blue); font-size:13px; line-height:1.5; }.et-copy-status:empty { display:none; }
.et-content-empty { padding:24px 14px; font-size:14px; color:var(--text-muted); background:var(--bg-page); }
.et-muted,.et-empty p { font-size:14px; color:var(--text-muted); line-height:1.6; }.et-empty { padding:24px; text-align:center; }.et-empty span { display:block; color:var(--et-blue); font-size:30px; margin-bottom:12px; }
.et-empty strong { display:block; font-size:16px; margin-bottom:8px; }
.live-command .lc-technical-flow:has(.execution-timeline) { height:auto; border:0; }
/* The operation uses the full width: indicators above, sequence, then console. */
.op-shell { background:var(--bg-page); }
.op-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(280px,1fr); grid-template-areas:'side' 'flow' 'console'; align-content:start; }
.op-side { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.4fr); gap:10px 20px; align-items:center; }
.op-side>.op-card-head { display:none; }
.op-kpis { grid-template-columns:repeat(6,minmax(0,1fr)); }
.op-kpis div { padding:4px 10px; border:0; border-radius:0; border-right:1px solid var(--border); background:none; }.op-kpis div:last-child { border:0; }.op-kpis b { font-size:22px; }.op-kpis span { font-size:13px; }
.op-msg { font-size:14px; margin:0; }.op-msg .run-end { margin:0; }
.op-msg .run-end.ok { color:var(--text-primary); border-color:var(--work-line); background:var(--work-tint); }
.op-flow { height:auto; min-height:0; }
.op-card { padding:14px; }.op-card-head { margin-bottom:12px; }.op-card-head h3 { font-size:17px; }.op-card-head>.muted { font-size:13px; }
.op-flow-card { padding:0; border:0; background:transparent; }.op-flow-card>.op-card-head { padding:0 4px; margin:0 0 8px; color:var(--text-primary); }
.op-head { padding:10px 14px; }
.op-head h2 { font-size:23px; }.op-head .muted { font-size:14px; }.op-kicker { font-size:12px; }
@container (max-width:850px) {
  .et-activity { order:3; flex:1 1 100%; }.et-pulse-row { grid-template-columns:74px minmax(0,1fr) 30px; }
  .et-detail-head { align-items:flex-start; flex-wrap:wrap; }.et-inspector dl>div { gap:8px; }
  .et-navigation { display:block; }.et-pages { margin-bottom:12px; }
}
@container (max-width:600px) {
  .et-toolbar { padding:12px; gap:12px; }.et-status>span:last-child { font-size:12px; }.et-tools { width:100%; }.et-follow { margin-left:auto; }
  .et-lane { grid-template-columns:98px minmax(0,1fr); }.et-lane-name { font-size:12px; padding:10px; }.et-lane-name>i { display:none; }
  .et-event-number { left:6px; top:5px; font-size:11px; }.et-summary { padding:10px 12px; gap:10px; }
  .et-event { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px; }.et-event strong,.et-event small { text-align:center; }.et-rail { background-position:0 31px; }
  .et-latest-focus { width:100%; }.et-window-label>span:first-child { display:none; }.et-window-label { font-size:12px; }
  .et-navigation { padding:12px; }.et-pages button { padding:8px; }.et-page-count { max-width:95px; }
  .et-detail-head { padding:14px 12px 10px; }.et-detail-meta { padding:0 12px 12px; gap:12px; }.et-inspector-body { padding:12px; }.et-detail-nav { width:100%; }.et-detail-nav .et-close-detail { margin-left:auto; }
  .et-inspector dl { flex-basis:100%; gap:10px 16px; }.et-inspector h4 { font-size:18px; }
  .et-code-toolbar,.et-reader-footer { padding:12px; }.et-reader-actions { gap:6px; }.et-reader-actions button { padding:7px 9px; }
  .et-code-line { grid-template-columns:36px minmax(0,1fr); }.et-code-number { padding:0 8px; }.et-code-text { padding:0 10px; }.et-code-nowrap .et-code-line { grid-template-columns:36px max-content; }
}
@media(max-width:1100px) { .op-side { grid-template-columns:1fr; }.op-kpis { gap:6px; }.op-kpis div { padding:8px; } }
@media(max-height:800px) and (min-width:1101px) {
  .op-grid { padding:8px; gap:8px; }.op-head { padding:8px 14px; }.op-side { padding:8px 14px; }
  .op-flow .et-sequence { grid-template-rows:repeat(3,minmax(84px,auto)); }.op-flow .et-rail { background-position:0 42px; }
  .op-flow .et-toolbar { padding-block:5px; }.op-flow .et-navigation { padding-block:6px; }
}
@media(max-width:650px) { .op-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }.op-grid { padding:8px; }.op-card { padding:10px; }.op-card-head { flex-wrap:wrap; }.op-head { align-items:flex-start; }.op-head h2 { font-size:19px; } }
@keyframes et-beacon { 0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--et-blue) 40%,transparent); } 80%,100% { box-shadow:0 0 0 7px transparent; } }
@keyframes et-arrive { from { opacity:.25; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .execution-timeline * { animation:none!important; transition:none!important; } }
.lc-sequence-caption { padding:6px 12px; display:flex; align-items:baseline; gap:14px; flex:none; }
.lc-sequence-caption span { font:10px var(--font-mono); letter-spacing:.1em; color:var(--lc-muted); }
.lc-sequence-caption strong { font-size:16px; color:var(--lc-text); }
.lc-forward-grid { position:relative; isolation:isolate; flex:1; min-height:100px; display:grid; grid-template-columns:96px repeat(var(--lc-columns),minmax(0,1fr)); grid-template-rows:repeat(3,minmax(32px,1fr)); margin:0 8px; }
.lc-forward-grid>svg { position:absolute; top:0; left:96px; width:calc(100% - 96px); height:100%; z-index:-1; overflow:visible; }
.lc-lane-label { display:flex; align-items:center; font:11px var(--font-mono); letter-spacing:.04em; color:var(--lc-muted); }
.lc-timeline-mark { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; }
.lc-timeline-mark strong { font-size:14px; font-weight:600; line-height:1.3; color:var(--lc-text); background:var(--lc-panel); padding:2px; }
.lc-mark-symbol { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; position:relative; border:2px solid #a6c9e7; border-radius:50%; background:var(--lc-panel); color:var(--lc-text); font:600 12px var(--font-mono); }
.lc-node-model .lc-mark-symbol { border-color:#c6b5ff; }.lc-mark-latest .lc-mark-symbol { border-width:3px; }
.lc-projection-graph .lc-graph-key { padding:4px 12px; font-size:11px; line-height:16px; }
@media(max-height:850px) and (min-width:1001px) {
  .lc-projector .lc-stage { grid-template-rows:minmax(0,1fr) 200px; }.lc-sequence-caption strong { font-size:14px; }
  .lc-projector .lc-kpis>div { display:flex; align-items:baseline; gap:8px; padding:2px 10px; }.lc-projector .lc-kpis strong { margin:0; }
  .lc-projector .lc-matrix .lc-panel-head { padding-block:5px; }.lc-projector .lc-matrix-pages { padding-block:4px; }
  .lc-projector .lc-projection-graph .lc-graph-key { display:none; }
}
@media(min-width:1600px) { .lc-timeline-mark strong { font-size:16px; } }
@media(max-width:650px) { .lc-timeline-mark { flex-direction:column; gap:4px; }.lc-forward-grid { grid-template-columns:70px repeat(var(--lc-columns),minmax(0,1fr)); }.lc-forward-grid>svg { left:70px; width:calc(100% - 70px); }.lc-lane-label { font-size:10px; }.lc-timeline-mark strong { font-size:14px; }.lc-sequence-caption { flex-wrap:wrap; gap:4px; } }
.lc-sequence-route { stroke:#92b6d4; stroke-width:1.5; stroke-dasharray:3 5; fill:none; opacity:.5; }
.lc-sequence-cursor { stroke:#bddaf0; stroke-width:1; stroke-dasharray:2 5; opacity:.4; }
.lc-sequence-cursor.is-live { animation:lc-cursor 2.5s ease-in-out infinite; }
.lc-timeline-mark circle { fill:#152536; stroke:#a6c9e7; stroke-width:2; }
.lc-timeline-mark.lc-node-model circle { stroke:#c6b5ff; }.lc-timeline-mark.lc-node-flag circle { stroke:#a6c9e7; }
.lc-timeline-mark .lc-mark-halo { position:absolute; inset:-7px; border:1px solid #a6c9e745; border-radius:50%; background:#a6c9e712; }
.lc-mark-arrival .lc-mark-halo { animation:lc-received .85s ease-out; }
.lc-mark-latest>circle:not(.lc-mark-halo) { stroke-width:3; }
.lc-timeline-mark text { font-size:12px; fill:var(--lc-text); }.lc-timeline-mark .lc-mark-index { font:10px var(--font-mono); }
@keyframes lc-cursor { 50% { opacity:.9; } }
@keyframes lc-received { from { transform:scale(.7); opacity:1; } to { transform:scale(1.3); opacity:.2; } }
@media(prefers-reduced-motion:reduce) { .lc-sequence-cursor.is-live,.lc-mark-arrival .lc-mark-halo { animation:none; } }
