/* infrastructure.html — page-specific styles.
   Layout/hero/card/section classes are reused from security.css (sec-*);
   this file only adds the deployment-tier table + capability pills. */

.infra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.infra-table thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--surface-tint);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.infra-table tbody td {
  padding: 0.8rem 1rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.infra-table tbody tr:last-child td {
  border-bottom: none;
}

.infra-table tbody tr:hover td {
  background: var(--surface-tint);
}

/* First column = tier name, emphasised. */
.infra-table tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* GPU capability pills */
.infra-pill {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}

.infra-pill-yes {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.infra-pill-opt {
  color: var(--sky);
  border-color: color-mix(in srgb, var(--sky) 45%, transparent);
  background: color-mix(in srgb, var(--sky) 12%, transparent);
}

.infra-pill-no {
  color: var(--lime);
  border-color: color-mix(in srgb, var(--lime) 45%, transparent);
  background: color-mix(in srgb, var(--lime) 12%, transparent);
}