/* ==========================================================================
   "Trace it yourself" MCP prompt box (components/Investigations/traceBox.ts).
   Its own sheet, not part of investigation-blog.css: some customLayout
   articles render outside .investigation_blog, so the box carries its own
   tokens. Selectors start with aside.inv-trace (0,1,1) and links use
   aside.inv-trace a.<class> (0,2,2), which outranks the per-article body link
   rules (0,2,1) without !important.
   ========================================================================== */
aside.inv-trace {
  --it-white: #ffffff;
  --it-text: #cdd3dd;
  --it-teal: #00d8dd;
  --it-teal-muted: #51becc;
  --it-line: rgba(255, 255, 255, 0.1);
  --it-cta: #93254b;
  --it-cta-hover: #af3e76;
  --it-cta-border: #621832;
  --it-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --it-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  box-sizing: border-box;
  max-width: 760px;
  margin: 28px auto 36px;
  padding: 20px 22px 22px;
  border: 1px solid rgba(81, 190, 204, 0.35);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 87, 93, 0.3) 0%, rgba(12, 18, 28, 0.6) 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--it-font);
  text-align: left;
}
aside.inv-trace * {
  box-sizing: border-box;
}
aside.inv-trace .inv-trace-eyebrow {
  font-family: var(--it-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--it-teal);
}
aside.inv-trace p.inv-trace-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--it-text);
}
aside.inv-trace .inv-trace-prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--it-line);
  border-radius: 10px;
  background: rgba(6, 9, 13, 0.7);
}
aside.inv-trace p.inv-trace-q {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--it-mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--it-white);
  overflow-wrap: anywhere;
}
aside.inv-trace button.inv-trace-copy {
  flex: 0 0 auto;
  font-family: var(--it-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--it-teal);
  background: transparent;
  border: 1px solid rgba(81, 190, 204, 0.45);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
}
aside.inv-trace button.inv-trace-copy:hover {
  background: rgba(0, 216, 221, 0.08);
}
aside.inv-trace .inv-trace-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
aside.inv-trace a.inv-trace-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--it-white);
  background: var(--it-cta);
  border: 1px solid var(--it-cta-border);
  border-radius: 4px;
  padding: 10px 16px;
  text-decoration: none;
}
aside.inv-trace a.inv-trace-btn:hover {
  background: var(--it-cta-hover);
  color: var(--it-white);
}
aside.inv-trace a.inv-trace-guide {
  font-size: 14px;
  line-height: 1.4;
  color: var(--it-teal-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(81, 190, 204, 0.4);
  text-decoration: none;
}
aside.inv-trace a.inv-trace-guide:hover {
  color: var(--it-teal);
}
aside.inv-trace a:focus-visible,
aside.inv-trace button:focus-visible {
  outline: 2px solid var(--it-teal);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  aside.inv-trace {
    padding: 16px;
  }
  aside.inv-trace .inv-trace-prompt {
    flex-direction: column;
  }
}