/* sim-components.css — "Simulated components" environment card for a use-case page.
   Rendered by the {{< sim-components >}} shortcode, driven by page front matter.
   Reuses the typed-chip cluster from the chapter environment diagram
   (diagrams/diagram-7-environment.html): one hue per component type, chips name
   the real open-source component each example simulates. Self-contained: tokens
   are scoped to .sim-components so it is its own light card in both guide
   themes. Sibling of env-diagram.css. Responsive: chips wrap, the legend wraps,
   nothing clips on a phone. */

/* relative url()s: resolved against this file's /css/ directory, so they
   survive subpath hosting (GitHub Pages serves the site under /art-of-evals/) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Inter-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2'); }

.sim-components {
  --sc-paper: #faf9f5;
  --sc-card-bd: #e7e3d8;
  --sc-ink: #1a1a19;
  --sc-muted: #84827f;
  --sc-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --sc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  margin: 1.75rem 0;
  padding: clamp(16px, 3vw, 24px);
  background: var(--sc-paper);
  border: 1px solid var(--sc-card-bd);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(22, 20, 15, 0.05);
  font-family: var(--sc-sans);
  color: var(--sc-ink);
}

/* one hue per component type, verbatim from diagrams/diagram-7-environment.html */
.sim-components .hw   { --bd: #e09a52; --ink: #c25a25; --bg: #fdf3e6; }
.sim-components .sw   { --bd: #8b82e0; --ink: #5a4fcb; --bg: #f1eff9; }
.sim-components .data { --bd: #41a07f; --ink: #0e6b52; --bg: #eaf7f1; }
.sim-components .obs  { --bd: #6aa5d9; --ink: #1d558e; --bg: #e8f1fa; }
.sim-components .docs { --bd: #bcd9cc; --ink: #0e6b52; --bg: #eef5f1; }

.sim-components .sc-title {
  font-size: 12.5px; font-weight: 400; color: var(--sc-muted);
  letter-spacing: 0.01em; margin-bottom: 14px;
}

.sim-components .sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-components .sc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 5px 15px;
  border-radius: 7px; border: 1.3px solid var(--bd);
  background: var(--bg);
}
.sim-components .sc-nm { font-family: var(--sc-mono); font-size: 11.5px; font-weight: 500; color: var(--ink); }
.sim-components .sc-ro { font-size: 10.5px; color: var(--sc-muted); }

.sim-components .sc-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.sim-components .sc-lg { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--sc-muted); }
.sim-components .sc-dot { width: 8px; height: 8px; border-radius: 2.5px; background: var(--bd); }