/* P009-01: equipment-selection icons. The 48px panel belongs to the consuming section. */
.equipment-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: var(--color-brand-green-darker);
  vertical-align: middle;
}

.equipment-icon--material {
  overflow: hidden;
  direction: ltr;
  font-family: "Material Symbols Outlined";
  font-feature-settings: "liga";
  font-size: 24px;
  font-style: normal;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.equipment-icon--svg { fill: currentColor; }

.equipment-icon-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.equipment-icon-set figure { margin: 0; }
.equipment-illustration-sample { margin: 0; text-align: center; }
.equipment-illustration-sample figcaption { font-size: 13px; color: var(--color-text-secondary); }
.equipment-sample-heading { margin: 0 0 16px; font-size: 14px; }
.equipment-icon-set + .equipment-sample-heading { margin-top: 32px; }
.equipment-icon-set--pictograms { text-align: center; }
.equipment-icon-set figure:has(.equipment-illustration) { text-align: center; }
.equipment-illustration { display: block; width: min(100%, 180px); height: auto; margin: 0 auto 12px; mix-blend-mode: multiply; }
.equipment-icon-set .equipment-icon { margin-bottom: 8px; }
.equipment-icon-set figcaption { color: var(--color-text-secondary); font-size: 13px; line-height: 1.55; }
.equipment-icon-set code { color: var(--color-text-muted); font-size: 11px; }

/* P009-02: site icon inventory. */
.material-symbol-inventory {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.material-symbol-inventory article {
  display: flex;
  min-width: 0;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-small);
}

.material-symbol-inventory__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--color-brand-green-darker);
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  font-style: normal;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  font-weight: normal;
  line-height: 1;
}

.material-symbol-inventory__icon--svg {
  fill: currentColor;
  font-family: inherit;
}

.material-symbol-inventory h4 { margin: 0; font-size: 14px; line-height: 1.45; }
.material-symbol-inventory code { color: var(--color-brand-green-darker); font-size: 11px; }
.material-symbol-inventory p { margin: 8px 0; color: var(--color-text-secondary); font-size: 12px; line-height: 1.6; }
.material-symbol-inventory dl { display: grid; gap: 5px; margin: 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.5; }
.material-symbol-inventory dl div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 5px; }
.material-symbol-inventory dt { font-weight: 700; }
.material-symbol-inventory dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .material-symbol-inventory { grid-template-columns: 1fr; }
}