/* Demonstration 4 additions. Everything general lives in /shared/atlas.css. */

.tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  margin-bottom: 12px;
  background: var(--surface);
}
.tool-card h3 { margin: 0 0 4px; font-size: 15px; }
.tool-card .desc {
  font-size: 13.5px; color: var(--text-dim); margin: 0 0 10px;
  border-left: 3px solid var(--border-strong); padding-left: 10px;
}

/* The four annotation booleans. Never colour alone: every chip carries text. */
.ann { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.ann .a {
  font: 600 11.5px/1.5 var(--mono);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 7px; background: var(--surface-2);
}
.ann .a.on  { border-color: var(--bad); }
.ann .a.off { border-color: var(--good); }
.ann .a b { font-weight: 700; }

.turn {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 9px;
  background: var(--surface);
}
.turn.tool      { border-left-color: var(--warn); }
.turn.guardrail { border-left-color: var(--bad); }
.turn.llm       { border-left-color: var(--violet); }
.turn.final     { border-left-color: var(--good); }
.turn .hd { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.turn .hd .nm { font: 700 13px var(--mono); }
.turn .hd .ms { font: 12px var(--mono); color: var(--text-faint); margin-left: auto; }
.turn pre { margin: 8px 0 0; font-size: 12px; max-height: 260px; }

.sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .sbs { grid-template-columns: 1fr; } }

.payload {
  border: 1px dashed var(--bad); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--bad-weak);
  font: 13px/1.55 var(--mono); white-space: pre-wrap;
}
.payload .lbl {
  display: block; font: 700 11px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--bad); margin-bottom: 6px;
}

.matrix td.auth { font: 700 12.5px var(--mono); white-space: nowrap; }
.footnote {
  font-size: 12.5px; color: var(--text-faint); border-top: 1px solid var(--border);
  padding-top: 10px; margin-top: 18px;
}
.frontmatter { font-size: 12.6px; }
.frontmatter .portable { color: var(--good); font-weight: 700; }
.frontmatter .vendor { color: var(--warn); font-weight: 700; }