/* Names, palette keys and real texture icons keep materials readable without color. */
.block-icon{display:block;width:48px;height:48px;object-fit:contain;flex:none;image-rendering:pixelated}
.material-visual{display:inline-flex;align-items:center;gap:10px;flex:none;vertical-align:middle}
.plan-swatch{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;background:var(--material-color);border:1px solid #536258;border-radius:4px}
.plan-swatch b{color:#142b23;font-size:.72rem;line-height:1;padding:2px 3px;background:#ffffffed;border-radius:2px}
.material-card .material-visual{width:100%;justify-content:space-between;flex-direction:row-reverse;gap:14px}
.material-card .block-icon{width:72px;height:72px}
.material-card h3{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.material-card small{font-size:.8rem;line-height:1.6}
.material-legend{padding:18px;border-top:1px solid var(--line);background:#fff}
.material-legend h3{font-size:1rem;margin:0 0 5px}
.material-legend>p{font-size:.85rem;color:#475e51;line-height:1.55;margin:0 0 14px;max-width:70ch}
.material-legend ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;margin:0;padding:0}
.material-legend li{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#f7f9f3}
.legend-material-name{min-width:0;font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
.legend-material-name small{display:block;color:#475e51;font-size:.82rem;font-weight:400;margin-top:2px}
.material-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 10px;vertical-align:middle}
.material-chip .block-icon,.run-token .block-icon{width:32px;height:32px}
.material-chip .material-visual,.run-token .material-visual{gap:6px}
.material-chip .plan-swatch,.run-token .plan-swatch{width:24px;height:24px}
.run-token .plan-swatch b{font-size:.65rem;width:auto}
.run-token{max-width:100%;min-width:0;overflow-wrap:anywhere}
.run-token>span:last-child{min-width:0}
.material-list-note{font-size:.85rem;color:var(--muted)}
.layer-legend{font-size:.85rem;line-height:1.6;border-top:1px solid var(--line)}
.layer-port .material-code{font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:2px;stroke-linejoin:round;fill:#142b23;pointer-events:none}
.sign-note{display:flex;align-items:center;gap:12px}
.sign-note .block-icon{width:42px;height:42px}
@media(max-width:480px){.materials-grid{grid-template-columns:1fr}.material-legend{padding:14px}.material-legend li{padding:10px}.material-card .block-icon{width:64px;height:64px}}
@media print{.plan-swatch,.block-icon{print-color-adjust:exact;-webkit-print-color-adjust:exact}.material-legend{break-inside:avoid}}