/* A local inspection surface, using the site's reviewed light palettes. */
.investigation-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.investigation-switch button { min-height: 34px; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--control-radius); color: var(--ink); background: var(--surface); font: inherit; font-size: .8125rem; }
.investigation-switch button[aria-pressed="true"] { border-color: var(--action); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; background: var(--section-soft); }
.investigation-view + .investigation-view { margin-top: 24px; }
.investigation-view[hidden] + .investigation-view { margin-top: 0; }
.trace-console { overflow: hidden; border-color: var(--line); }
.trace-console-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 20px; background: var(--action); color: var(--action-ink); font: .8125rem/1.5 var(--font-mono); }
.trace-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.trace-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .8125rem; }
.trace-controls select { min-height: 34px; max-width: 100%; padding: 5px 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--control-radius); }
.trace-protection input { accent-color: var(--action); width: 16px; height: 16px; }
.trace-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trace-actions .button { min-height: 34px; padding: 5px 10px; font-size: .8125rem; }
.trace-reset { border: 0; background: transparent; min-height: 34px; font: inherit; font-size: .8125rem; padding: 5px 8px; }
.trace-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 16px 20px; background: var(--section-soft); }
.trace-status { font: .875rem/1.5 var(--font-mono); color: var(--ink); }
.trace-metrics { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; }
.trace-metrics dt { font-size: .6875rem; }
.trace-metrics dd { margin: 0; font: 1.125rem/1.5 var(--font-mono); color: var(--ink); }
.trace-topology { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding: 20px; margin: 0; }
.trace-topology li { position: relative; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); min-width: 0; }
.trace-topology li + li::before { content: '→'; position: absolute; left: -20px; top: 38%; color: var(--action); }
.trace-node-index { font: .6875rem var(--font-mono); color: var(--muted); }
.trace-topology strong { font-size: .9375rem; }
.trace-node-state { font: .75rem/1.4 var(--font-mono); }
.trace-topology [data-active="true"] { border: 2px solid var(--action); padding: 11px; background: var(--section-soft); }
.trace-topology [data-failed="true"] { border-style: dashed; }
.trace-topology { background-image: linear-gradient(var(--section-soft) 1px, transparent 1px), linear-gradient(90deg, var(--section-soft) 1px, transparent 1px); background-size: 16px 16px; }
.trace-topology li { background-color: var(--surface); }
.trace-traffic { display: block; width: 100%; height: 20px; margin-bottom: 16px; overflow: visible; }
.trace-traffic path { stroke: var(--line); fill: none; stroke-width: 1; }
.trace-packet { fill: var(--accent); transform: translateX(var(--to, 125px)); }
.trace-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); gap: 24px; padding: 0 20px 20px; }
.trace-inspector { min-width: 0; border-inline-start: 3px solid var(--accent); padding-inline-start: 16px; }
.trace-inspector .eyebrow { margin-bottom: 8px; }
.trace-operation { font-size: 1.125rem; margin-bottom: 8px; }
.trace-detail, .trace-lesson { font-size: .9375rem; }
.trace-payload-label { font-size: .75rem; margin-block: 16px 6px; }
.trace-inspector pre { padding: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.6 var(--font-mono); }
.trace-timeline { min-width: 0; }
.trace-timeline summary { cursor: pointer; padding-block: 8px 12px; font-size: .875rem; font-weight: 600; }
.trace-timeline summary span { display: block; margin-top: 4px; font-size: .6875rem; color: var(--muted); font-weight: 400; }
.trace-events { list-style: none; padding: 0; margin: 0; }
.trace-events li + li { margin-top: 3px; }
.trace-events button { display: grid; grid-template-columns: 54px minmax(0,1fr) 58px; gap: 4px 8px; width: 100%; text-align: left; padding: 7px 8px; border: 1px solid transparent; border-radius: 3px; color: var(--ink); background: var(--surface); font: inherit; }
.trace-events button[aria-current="step"] { border-color: var(--action); background: var(--section-soft); }
.trace-event-node { font: .6875rem/1.6 var(--font-mono); text-transform: uppercase; }
.trace-event-label { font-size: .8125rem; }
.trace-event-time { text-align: right; font: .6875rem/1.6 var(--font-mono); }
.trace-track { grid-column: 2 / -1; position: relative; display: block; height: 4px; background: var(--section-soft); }
.trace-bar { display: block; position: absolute; height: 4px; left: var(--offset); width: var(--duration); background: var(--line); }
[data-visited="true"] .trace-bar { background: var(--action); }
.trace-lesson { border-top: 1px solid var(--line); padding: 16px 20px 0; color: var(--ink); }
.trace-footnote { padding: 10px 20px 18px; font-size: .75rem; }
@media (prefers-reduced-motion: no-preference) {
  .trace-packet.is-moving { animation: trace-hop .6s ease-out; }
  @keyframes trace-hop { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }
  .trace-topology [data-active="true"]::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); top: 10px; right: 10px; animation: trace-arrive .6s ease-out; }
  @keyframes trace-arrive { from { transform: translateX(-36px); opacity: .25; } to { transform: none; opacity: 1; } }
}
@media (max-width: 760px) {
  .trace-controls, .trace-summary { padding: 12px; gap: 10px; }
  .trace-controls > label:first-child { width: 100%; justify-content: space-between; }
  .trace-controls select { flex: 1; min-width: min(100%, 10em); }
  .trace-controls { scroll-margin-top: 85px; }
  .trace-topology { gap: 10px; padding: 12px; }
  .trace-topology li { padding: 6px; }
  .trace-topology [data-active="true"] { padding: 5px; }
  .trace-topology li + li::before { left: -10px; font-size: .625rem; }
  .trace-topology strong { font-size: .75rem; }
  .trace-node-state { font-size: .625rem; }
  .trace-workspace { grid-template-columns: minmax(0,1fr); padding: 0 12px 12px; gap: 16px; }
  .trace-console-header { padding: 10px 12px; font-size: .6875rem; }
  .trace-metrics { gap: 10px 20px; }
  .trace-events button { grid-template-columns: 45px minmax(0,1fr) 52px; padding-inline: 4px; gap: 4px; }
  .trace-event-label { font-size: .75rem; }
}
@media print {
  .trace-controls, .investigation-switch { display: none !important; }
  .engineering-lab .investigation-view[hidden] { display: block !important; }
  .trace-workspace { grid-template-columns: minmax(0,1fr); }
  .trace-console-header { background: white; color: black; border-bottom: 1px solid black; }
  .trace-events button { break-inside: avoid; }
}