/* What makes what: one row per thing, makers and sources in, consumers out. */

.making { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(180px, 230px) 28px minmax(0, 1fr); align-items: center; gap: 0; padding: 6px 0; border-bottom: 1px dashed color-mix(in srgb, var(--line) 60%, transparent); }
.mside { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mside.in { align-items: flex-end; text-align: right; }
.mend { max-width: 100%; padding: 4px 8px; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; box-shadow: 1px 1px 0 var(--shadow); }
.mend.in { border-right: 3px solid var(--act); }
.mend.out { border-left: 3px solid var(--talk); }
.mend .small { font-size: 11px; }
.mnone { font-size: 12px; color: var(--muted); font-style: italic; padding: 0 8px; }
.marrow { height: 2px; background: var(--wire); position: relative; }
.marrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--wire); border-right: 0; }
.mnode { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--talk); box-shadow: 0 2px 6px var(--shadow); min-width: 0; }
.mnode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mnode b { font: 600 13px var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnode .mk { font: 9px/1.6 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; }
.mprob { font: 9px/1.6 var(--pixel); -webkit-font-smoothing: none; }
.mrow.never-made .mnode { border-top-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.mrow.never-made .mprob { color: var(--warn); }
.mrow.never-used .mnode { border-top-color: var(--state); background: color-mix(in srgb, var(--state) 9%, var(--panel)); }
.mrow.never-used .mprob { color: var(--state); }
.mrow.sel .mnode { box-shadow: 0 0 0 2px var(--accent); }
.mchain { display: flex; flex-direction: column; gap: 3px; padding-bottom: 6px; }
.mparts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.mpart { display: inline-flex; align-items: center; gap: 3px; }
.follow { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) { .mrow { grid-template-columns: 1fr; } .marrow { display: none; } .mside.in { align-items: flex-start; text-align: left; } }